我是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的方法?
3条答案
按热度按时间2fjabf4q1#
将其 Package 在
template
标签中,因为模板标签不会出现在最终呈现的HTML中:或者更好的是,改进你的标记语义并使用标签标记:
b09cbbtk2#
您可以在div中添加模板,因为模板不会呈现到DOM中:
q5lcpyga3#
问题是,标签后面的字符串插值
{{hobby}}
在循环之外,这就是为什么会显示错误,在这个特定的情况下,你必须**将它 Package 在某个东西里面。如果你不想特别使用div,你可以选择label,在这个场景中,label更自然,现在如果用户点击label,复选框将自动被选中。