javascript v-for在vue.js中不使用html元素

2jcobegt  于 2023-04-10  发布在  Java
关注(0)|答案(3)|浏览(178)

我是Vue.js的新手
我正在准备一个输入元素练习的演示,下面是我的代码。

超文本标记语言

<div id="inputDiv">
  <form action="">
    <input type="text" v-model="first_name">
    <input type="text" v-model="last_name">
    <input type="email" v-model="email">
    <div>
      <input type="radio" :name="gender" v-model="gender" value="male">Male
      <input type="radio" :name="gender" v-model="gender" value="female">Female
    </div>
    <textarea v-model="address" id="" cols="30" rows="10"></textarea>
    <br>
    <div v-for="hobby in hobbies">
      <input type="checkbox" v-model="userHobbies" v-bind:value="hobby">{{hobby}}
    </div>
  </form>
</div>

脚本

const inputApp = new Vue({
  el: '#inputDiv',
  data: {
    first_name: '',
    last_name: '',
    email: '',
    gender: 'male',
    address: '',
    userHobbies:[],
    hobbies: ['Reading', 'Cricket', 'Cycling', 'Hiking']
  }
})

这里你可以看到,要显示带有标签的Hobby,我必须迭代parent,
添加一个div不是我想要的东西,如果我将v-for在输入元素中,如:

<input 
  type="checkbox" 
  v-for="hobby in hobbies" 
  v-model="userHobbies" 
  v-bind:value="hobby"
>{{hobby}}

然后抛出异常**[Vue warn]:示例上未定义属性或方法“hobby”**
我的问题是,在不使用HTML元素的情况下,是否有任何替代对象元素的v-for的方法?

2fjabf4q

2fjabf4q1#

将其 Package 在template标签中,因为模板标签不会出现在最终呈现的HTML中:

<template v-for="hobby in hobbies">
    <input type="checkbox" v-model="userHobbies" v-bind:value="hobby">{{hobby}}
</template>

或者更好的是,改进你的标记语义并使用标签标记:

<label v-for="hobby in hobbies">
    <input type="checkbox" v-model="userHobbies" v-bind:value="hobby"> {{hobby}}
</label>
b09cbbtk

b09cbbtk2#

您可以在div中添加模板,因为模板不会呈现到DOM中:

<div id="inputDiv">
    <form action>
      <input type="text" v-model="first_name">
      <input type="text" v-model="last_name">
      <input type="email" v-model="email">
      <div>
        <input type="radio" :name="gender" v-model="gender" value="male">Male
        <input type="radio" :name="gender" v-model="gender" value="female">Female
      </div>
      <textarea v-model="address" id cols="30" rows="10"></textarea>
      <br>
      <template v-for="hobby in hobbies">
        <input type="checkbox" v-model="userHobbies" v-bind:value="hobby">
        {{hobby}}
      </template>
    </form>
  </div>
q5lcpyga

q5lcpyga3#

问题是,标签后面的字符串插值{{hobby}}在循环之外,这就是为什么会显示错误,在这个特定的情况下,你必须**将它 Package 在某个东西里面。
如果你不想特别使用div,你可以选择label,在这个场景中,label更自然,现在如果用户点击label,复选框将自动被选中。

<label v-for="hobby in hobbies">
    <input type="checkbox" v-model="userHobbies" v-bind:value="hobby"> {{hobby}} <br>
</label>
new Vue({
  el: '#inputDiv',
  data: {
    first_name: '',
    last_name: '',
    email: '',
    gender: 'male',
    address: '',
    userHobbies:[],
    hobbies: ['Reading', 'Cricket', 'Cycling', 'Hiking']
  }
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="inputDiv">
<form action="">
    <input type="text" v-model="first_name">
    <input type="text" v-model="last_name">
    <input type="email" v-model="email">
    <div>
        <input type="radio" :name="gender" v-model="gender" value="male">Male
        <input type="radio" :name="gender" v-model="gender" value="female">Female
    </div>
    <textarea v-model="address" id="" cols="30" rows="10"></textarea>
    <br>
    <label v-for="hobby in hobbies">
        <input type="checkbox" v-model="userHobbies" v-bind:value="hobby">{{hobby}}
        <br>
    </label>
</form>
{{ userHobbies | json }}
</div>

相关问题