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

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

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>

V-for: different html or use v-for without html-element?, Because of display:flex i can not use other HTML-structure. are asking, but this might help: https://vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt. It basically allows you to use v-for without having a containing element. Hello, I want this HTML: [code] Label Message 1 Message 2 Label 2 Message 3 [/code] (article element not necessary, but just for highlight the functionallity) Because of display:flex i can not use other HTML-structure. I tried: [code] .. [/code] But that repeats the div.root element. I tried: [code] ..

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>

Use v-for without wrapping element, You can do that in computed . That's what you need. You can use <template v-for="item in items"></template> which will only render the contents in your HTML and not a wrapping element. Vue.js supports rendering lists of items onto the browser using the built-in v-for core directive. Starting off with the Vue.js Hello World application, we can add data that can then be repeated using v-for .

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>

6 Techniques to Write Better VueJS v-for Loops, If we don't use keys, Vue will try to make the DOM as efficient as possible. This may mean that v-for elements may appear out of order or other� List Rendering v-for. We can use the v-for directive to render a list of items based on an Array. The v-for directive requires a special syntax in the form of item in items, where items is the source data Array and item is an alias for the Array element being iterated on:

v-for need empty tag for a group of element,something like ng , Sometimes we don't really want a html element,for example in Read the docs: https://vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt� When Vue is updating a list of elements rendered with v-for, by default it uses an “in-place patch” strategy. If the order of the data items has changed, instead of moving the DOM elements to match the order of the items, Vue will patch each element in-place and make sure it reflects what should be rendered at that particular index.

How to render an array of data in Vue, List Rendering with Vue.js — v-for Directive v-for by default updates the items in place instead of moving the DOM elements to match the order of the items to� Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers. Under the hood, Vue compiles the templates into Virtual DOM render functions.

1. Vue.js: The Basics - Vue.js: Up and Running [Book], It selects the element matching .js-items and stores it in the $itemsUl object. through v-html without carefully validating and escaping what they've written first. A somewhat valid use-case might be if you’re writing a new front-end component for an ancient legacy system that (shudders) stores HTML mixed with data in an aging database in the long-forgotten server room in some leased facility upstate. In that case, you might have to resort to rendering raw HTML in your app. So let’s get started.