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> 

Answer 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>