Issue with Vue v-model not updating values of an array when v-for is used

Question

Issue with Vue v-model not updating values of an array when v-for is used

I am a beginner with Vue and I'm exploring the possibilities of v-model. My goal is to create an array of editable names. Below is the code I have been working on:

var app = new Vue({
  el: '#app',
  data: {
    names: ['Josh', 'Tom']
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>

<div id="app">
  Editable list:
  <ul>
    <li v-for="name in names"><input type="text" v-model="name"></li>
  </ul>
  {{ names }}
</div>

Although the inputs display correctly and show the expected values, updating them does not reflect changes in the names array as it should. What could be causing this issue?

javascript vue.js vuejs2

Answer 1

Answer №1

Instead of using v-model to manipulate a value directly, you should be operating on a vue data field. Here's an example:

var app = new Vue({
  el: '#app',
  data: {
    people: [{name: 'Josh'}, {name: 'Tom'}]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>

<div id="app>
  Editable list:
  <ul>
    <li v-for="person in people"><input type="text" v-model="person.name"></li>
  </ul>
  {{ people }}
</div>

Alternatively, you can also use the following approach:

var app = new Vue({
  el: '#app',
  data: {
    names: ['Josh', 'Tom']
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>

<div id="app">
  Editable list:
  <ul>
    <li v-for="(name, index) in names"><input type="text" v-model="names[index]"></li>
  </ul>
  {{ names }}
</div>

Answer 2

Instead of using v-model to manipulate a value directly, you should be operating on a vue data field. Here's an example:

var app = new Vue({
  el: '#app',
  data: {
    people: [{name: 'Josh'}, {name: 'Tom'}]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>

<div id="app>
  Editable list:
  <ul>
    <li v-for="person in people"><input type="text" v-model="person.name"></li>
  </ul>
  {{ people }}
</div>

Alternatively, you can also use the following approach:

var app = new Vue({
  el: '#app',
  data: {
    names: ['Josh', 'Tom']
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>

<div id="app">
  Editable list:
  <ul>
    <li v-for="(name, index) in names"><input type="text" v-model="names[index]"></li>
  </ul>
  {{ names }}
</div>

Issue with Vue v-model not updating values of an array when v-for is used

Answer №1

Similar questions

What is the reason behind JavaScript subtracting the timezone offset for ISO dates when passed into the Date() function?

Is it possible for a Vue.js build to encounter errors due to unregistered components?

Automatically populate the form with data from a MongoDB database in Express, based on the user's previous selection

What is the process to convert an IEnumerable of Anonymous Type in C# into a JavaScript Object?

Updating route from action within Vuex Store

Is there a way for me to view the properties within the subcomponents?

Tips for determining whether a user is part of an array of users with a mongoose query

Using console.log() within a method while chaining in JavaScript/jQuery

Jquery validation is ineffective when it fails to validate

Ban on the utilization of emojireact-role in external channels

Issue encountered while attempting to include a background image in React JS

What is the format required for specifying the end date and start date when using

Tap on the div nested within another div

The redirection did not occur as no authorization token was detected

function name cannot be invoked correctly in JavaScript

Am I on the right track with my service definition in Angular?

The React page loads before verifying the clients' permissions

Is there a way to create a multi-page website simulation using jQuery?

List item with React Material UI tooltip

Selenium and JavaScript integration for opening new browser tabs