Menu
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 ?
343
Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data. All Vue templates are syntactically valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
The v-html directive is a Vue. js directive used to update a element's inner HTML with our data. This is what separates it from v-text which means while v-text accepts string and treats it as a string it will accept string and render it into HTML.
The v-cloak directive is a Vue. js directive that will remain on the element until the associated Vue instance finishes compilation. Combined with CSS rules such as [v-cloak] { display: none }, this directive can be used to hide uncompiled mustache bindings until the Vue instance is ready.
Conclusion. Vue gives you a bunch of good ways to hide the element on the screen. When using v-if="false" the element isn't rendered at all in the DOM. When using v-show="false" the element is rendered in the DOM, however, Vue applies the inline style display: none that hides the element completely.
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> 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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With