v-for directive is the right way to do list rendering in Vue. If your Vue instance has an array in
data, you can render each element in the array using
Vue also handles array change detection. If you were to remove an element from the array using
splice(), Vue would remove an
<li> from the DOM for you.
Although you can loop over an array of strings using
v-for, it won’t work with
v-model directive won’t be able to update your array with any changes to the
The way to work around this is to use an array of objects with
v-for. Whenever you use
v-for, make sure the property you’re binding with
v-model is an object property.
You can also use
v-for to loop over the keys of an object using the
v-for="(value, key) in obj" syntax. Note that
v-for only loops over own properties.