Vue kann das Array nicht über den Index ändern

Zunächst einmal kann die offizielle Definition nicht geändert werden:

Vue kann Änderungen an den folgenden Arrays nicht erkennen:

  • Wenn Sie ein Array-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

 1. Ersetzen Sie direkt den gesamten Index

<ul>

      <li v-for="(item, index) in timeWait" :key="index">

        <span>系统正在运行,请稍等...  {
   
   { !isNaN(item.value)?('当前结果是:'+item.value):'' }}</span>

      </li>

</ul>
created() {
    this.timeWait.push({id:'001',value:90})
},
 methods: {
    handelOk(type, data) {
      this.timeWait[0] = {id:'002',value:80}
}

Ergebnis: Die Änderung ist fehlgeschlagen und die Seite bleibt unverändert.

2. Fügen Sie Attribute über Indizes hinzu

created() {
    this.timeWait.push({id:'001'})
},
 methods: {
    handelOk(type, data) {
      this.timeWait[0].value = 80;
}

Ergebnis: Die Änderung ist fehlgeschlagen und die Seite bleibt unverändert.

3. Ändern Sie Objekte durch Indizes

created() {
    this.timeWait.push({id:'001',value:80})
},
 methods: {
    handelOk(type, data) {
      this.timeWait[0].value = 900;
}

Ergebnis: Die Änderung ist erfolgreich und die Seite ändert sich. Aus diesem Grund sagen viele Experten auch, dass Indizes das Array in einen responsiven Typ ändern können.

Ergänzung: Das Hinzufügen über die beiden Methoden kann nicht geändert werden. Wenn Sie jedoch sofort nach der Änderung Daten hineinschieben, werden Sie auf magische Weise feststellen, dass die Seite angezeigt werden kann.

created() {
    this.timeWait.push({id:'001'})
},
 methods: {
    handelOk(type, data) {
      this.timeWait[0].value = 80;
      this.timeWait.push('')
}

Supongo que te gusta

Origin blog.csdn.net/qq_52856519/article/details/131088765
Recomendado
Clasificación