I am new to learning Vue.js and currently working on a demo for input elements practice. Below is the code I have written:
HTML
<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>
Script
const inputApp = new Vue({
el: '#inputDiv',
data: {
first_name: '',
last_name: '',
email: '',
gender: 'male',
address: '',
userHobbies:[],
hobbies: ['Reading', 'Cricket', 'Cycling', 'Hiking']
}
})
In order to display Hobby with label without using a parent div, I tried iterating directly in the input element as shown below:
<input
type="checkbox"
v-for="hobby in hobbies"
v-model="userHobbies"
v-bind:value="hobby"
>{{hobby}}
However, this approach led to an exception [Vue warn]: Property or method "hobby" is not defined on the instance. Is there any alternative way to achieve iteration over object elements without including an HTML element?