v-for without using html element in vue.js

by

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>

Related Contents:

  1. How to listen for ‘props’ changes
  2. Can I pass parameters in computed properties in Vue.Js
  3. Vue v-on:click does not work on component
  4. How to call function on child component on parent events
  5. Methods vs Computed in Vue
  6. How to add external JS scripts to VueJS Components?
  7. Vue Js – Loop via v-for X times (in a range)
  8. Vuex state on page refresh
  9. [Vue warn]: Property or method is not defined on the instance but referenced during render
  10. Vue.js dynamic images not working
  11. Passing props dynamically to dynamic component in VueJS
  12. Communication between sibling components in Vue.js 2.0
  13. Vue.js img src concatenate variable and text
  14. Vue – Deep watching an array of objects and calculating the change?
  15. How can I go back/route-back on vue-router?
  16. Vuejs and Vue.set(), update array
  17. Vue.js: Conditional class style binding
  18. How to listen to the window scroll event in a VueJS component?
  19. How to access external json file objects in vue.js app
  20. How to access the getter from another vuex module?
  21. Accessing Vuex state when defining Vue-Router routes
  22. Condition in v-bind:Style
  23. Vue.js 2: Delete property from data object
  24. Change the default base url for axios
  25. File input on change in vue.js
  26. Vue template or render function not defined yet I am using neither?
  27. Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered
  28. Use arrow function in vue computed does not work
  29. Console warning: component lists rendered with v-for should have explicit keys
  30. How to use Vuetify tabs with vue-router
  31. How can I set selected option selected in vue.js 2?
  32. Is it possible to pass a component as props and use it in a child Component in Vue?
  33. Force download GET request using axios
  34. Error message. “Props with type Object/Array must use a factory function to return the default value.”
  35. Vue.js run a code in mounted and again for restart functionality
  36. Passing props with programmatic navigation Vue.js
  37. How to define a temporary variable in Vue.js template
  38. Vuejs typescript this.$refs..value does not exist
  39. How to use onfocusout function in vue.js?
  40. Is there any way to ‘watch’ for localstorage in Vuejs?
  41. Get element height with Vuejs
  42. Should we use v-model to modify Vuex store?
  43. How to add a class conditionally in Vue?
  44. Vue.js: Nuxt error handling
  45. How to set a component non-reactive data in Vue 2?
  46. Vue PWA not getting new content after refresh
  47. Importing javascript file for use within vue component
  48. Vue 2 – How to set default type of array in props
  49. vue, emitting vs passing function as props
  50. What is better in vue.js 2, use v-if or v-show?

Leave a Comment