Methode zum Ändern des Werts eines bestimmten Elements in den von vue angeforderten Daten

Im Folgenden werde ich Ihnen eine Methode (ausführliche Erklärung) zum Ändern eines bestimmten Werts in den von vue angeforderten Daten vorstellen. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.

Aufgrund von JavaScript-Einschränkungen kann Vue die folgenden geänderten Arrays nicht erkennen:

Wenn Sie ein Element direkt mithilfe des Index festlegen, zum Beispiel: vm.items[indexOfItem] = newValue

, wenn Sie die Länge des Arrays ändern, zum Beispiel: 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>

Aufgrund des Betriebsproblems hier habe ich Kommentare direkt in den Code geschrieben, damit jeder klar verstehen kann, wie man mit diesen Methoden die Länge des Arrays und ein bestimmtes Element des Index ändert.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Detaillierte Erläuterung der vier Arten der Ereignisbindung in React

Durch Vue + Vuex diese 2 Implementieren Sie todolist mit ähnlicher Technologie (ausführliches Tutorial)

Verwenden Sie Vue, um zu implementieren, wie Sie die ID jeder Zeile in der Tabelle erhalten (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonMethode zum Ändern des Werts eines bestimmten Elements in den von vue angeforderten Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!