Method to change the value of a certain item in the data requested by vue

Below I will share with you a method (detailed explanation) of changing a certain value in the data requested by vue. It has a good reference value and I hope it will be helpful to everyone.

Due to JavaScript limitations, Vue cannot detect the following changed arrays:

When you use the index to directly set an item, for example: vm.items[indexOfItem] = newValue

When you modify the length of the array, for example: vm.items.length = newLength

in

<template>
 <p>
  <ul>
   <li v-for = " (item,index) in list" v-text=&#39;`${item} - ${index} `&#39;></li>
  </ul>
  <button @click="change3">改变数组第2个值,改成0</button>
  <button @click="change4">改变数组第2个值,改成5</button>
 </p>
</template>
<script>
import Vue from &#39;vue&#39;
export default {
 data () { 
  return {
   list : [ 1, 2, 3, 4],
   list2 : [ 7, 8, 9, 0 ]
  }
 },
 methods : {
  //通过下标来改变整个数组里的值也是行不通的
  changeList () {
   this.list[2] = 3
  },
  //通过数组长度改变改个数组里的值是行不通的
  changeList2 () {
   this.length = 1
  },
  //第一我们可以通过，vue.set实列方法来改变，但我们要在开头再引一入下vue包
  // 1 第一个值代表需要改变的数组
  // 2 第二个代表改变那一项
  // 3 第三个代表改成什么值
  //样式语法 Vue.set(example1.items, indexOfItem, newValue)
  change3 () {
   Vue.set(this.list,1,0)
  },
  //通过 Array.prototype.splice 数组原型上的方法来改变整个数组的长度或者内容
  //这个方法大家肯定常用，我就不细说了
  change4 () {
   this.list.splice(1,1,5)
  }
 }
}
</script>

Because of the operation problem here, I wrote comments directly in the code, so that everyone can clearly understand how to change the length of the array and change a certain element of the subscript through those methods.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed explanation of the four ways of event binding this in react

Through vue vuex these two ways Technical implementation of todolist (detailed tutorial)

Use vue to implement how to get the id of each row in the table (detailed tutorial)

The above is the detailed content of Method to change the value of a certain item in the data requested by vue. For more information, please follow other related articles on the PHP Chinese website!