Méthode pour changer la valeur d'un certain élément dans les données demandées par vue

Ci-dessous, je vais partager avec vous une méthode (explication détaillée) pour modifier une certaine valeur dans les données demandées par Vue. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

En raison des limitations de JavaScript, Vue ne peut pas détecter les tableaux modifiés suivants :

Lorsque vous définissez un élément directement à l'aide de l'index, par exemple : vm.items[indexOfItem] = newValue

lorsque vous modifiez la longueur du tableau, par exemple : vm.items.length = newLength

dans

<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>

En raison de problèmes opérationnels, j'ai écrit des commentaires directement dans le code, afin que tout le monde puisse clairement comprendre comment changer la longueur du tableau et modifier un certain élément de l'indice via ces méthodes.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Explication détaillée des quatre façons d'événement liant ceci dans React

Grâce à vue + vuex ces 2 Implémentez Todolist avec une technologie similaire (tutoriel détaillé)

Utilisez Vue pour implémenter comment obtenir l'identifiant de chaque ligne du tableau (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!