Sometimes, we want to use v-model on an array with multiple inputs with Vue.js.

In this article, we’ll look at how to use v-model on an array with multiple inputs with Vue.js.

How to use v-model on an array with multiple inputs with Vue.js?

To use v-model on an array with multiple inputs with Vue.js, we can use the v-for directive to render the array.

Then we use v-model to bind to the properties of each object.

For instance, we write

<template>
  <div id="app">
    <div v-for="(find, index) in finds">
      <input v-model="find.value" :key="find.id" />
    </div>
    <button @click="addFind">New</button>
  </div>
</template>

<script>
//...
export default {
  //...
  data() {
    return {
      finds: [],
    };
  },
  methods: {
    addFind() {
      this.finds.push({ id: uuidv4(), value: "" });
    },
  },
  //...
};
</script>

to use v-for to render the finds array into divs.

Then in each div, we add an input that binds the find.value property to the input value.

We set key to the unique find.id value so Vue can distinguish the rendered items.

Then in addFind, we call this.finds.push with an object with the unique id and value set to an empty string.

addFind is called when we click the New button.

Conclusion

To use v-model on an array with multiple inputs with Vue.js, we can use the v-for directive to render the array.

Then we use v-model to bind to the properties of each object.