V-for Without Using Html Element In Vue.js
I am newbie to Vue.js I am preparing demo for input elements practices, here is my code. HTML
Solution 2:
You can add template inside of div as template is not rendered to the 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>
Solution 3:
The issue is that, the string interpolation {{hobby}} after the tag is outside the loop, which is why the error is shown, in this specific case, you have to wrap it inside something.
If you don't want to specifically use div you can go for label instead which is much more natural in this scenario and now if the user clicks on the label, the checkbox will automatically get selected.
<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>
Post a Comment for "V-for Without Using Html Element In Vue.js"