javascript - v-for without using html element in vue.js

Question

I am newbie to Vue.js

I am preparing demo for input elements practices, here is my code.

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']
  }
  })
})

Here you can see, to display Hobby with label I have to iterate with parent ,

adding a div is not something I wants, If I will v-for in input element like:

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

thin it's thowing exception [Vue warn]: Property or method "hobby" is not defined on the instanc

My question is is there any alternative to use v-for over object elements without using HTML element ?

Answer 1

Wrap it in a template tag as the template tag will not appear in the final rendered HTML:

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

Or even better, improve your markup semantics and use a label tag:

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