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

Copy

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

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

Solution 2:

You can add template inside of div as template is not rendered to the DOM:

<divid="inputDiv"><formaction><inputtype="text"v-model="first_name"><inputtype="text"v-model="last_name"><inputtype="email"v-model="email"><div><inputtype="radio":name="gender"v-model="gender"value="male">Male
        <inputtype="radio":name="gender"v-model="gender"value="female">Female
      </div><textareav-model="address"idcols="30"rows="10"></textarea><br><templatev-for="hobby in hobbies"><inputtype="checkbox"v-model="userHobbies"v-bind:value="hobby">
        {{hobby}}
      </template></form></div>

Solution 3:

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.

Baca Juga

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

newVue({
  el: '#inputDiv',
  data: {
    first_name: '',
    last_name: '',
    email: '',
    gender: 'male',
    address: '',
    userHobbies:[],
    hobbies: ['Reading', 'Cricket', 'Cycling', 'Hiking']
  }
  });

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><divid="inputDiv"><formaction=""><inputtype="text"v-model="first_name"><inputtype="text"v-model="last_name"><inputtype="email"v-model="email"><div><inputtype="radio":name="gender"v-model="gender"value="male">Male
        <inputtype="radio":name="gender"v-model="gender"value="female">Female
    </div><textareav-model="address"id=""cols="30"rows="10"></textarea><br><labelv-for="hobby in hobbies"><inputtype="checkbox"v-model="userHobbies"v-bind:value="hobby">{{hobby}}
        <br></label></form>
{{ userHobbies | json }}
</div>

JavaScript General

V-for Without Using Html Element In Vue.js

Solution 2:

Solution 3:

Post a Comment for "V-for Without Using Html Element In Vue.js"