v-for without using html element in vue.js

Question

I am a newbie to Vue.js

I am preparing a 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 want, 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}}

then it's throwing exception [Vue warn]: Property or method "hobby" is not defined on the instance

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

James Coyle · Accepted Answer · 2019-04-26 10:32:35Z

103

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>

answered Apr 26, 2019 at 10:32

James Coyle

10.5k2 gold badges42 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Simon Thiel · Accepted Answer · 2019-04-26 10:31:36Z

12

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>

answered Apr 26, 2019 at 10:31

Simon Thiel

3,3356 gold badges30 silver badges50 bronze badges

Comments

Shuvojit · Accepted Answer · 2019-04-26 10:32:11Z

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>

Collectives™ on Stack Overflow

v-for without using html element in vue.js

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related