Was soll ich tun, wenn Vue Daten hinzufügt, diese aber nicht aktualisiert?

Lösungen für das Hinzufügen von Daten, aber nicht zum Aktualisieren von Vue: 1. Verwenden Sie „this.$set(target, key, value);“ oder „Vue.set(target, key, value)“, um Attribute hinzuzufügen. 2. Beim Rendern verwenden mehrere Slots dynamisch in die Funktion einbinden und Werte an die Slots übergeben.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Vue Version 3, Dell G3-Computer.

Was soll ich tun, wenn Vue Daten hinzufügt, aber nicht aktualisiert?

Lösen Sie das Problem, dass Vue-Daten nicht in Echtzeit aktualisiert werden (die Daten ändern sich, aber die Daten werden nicht in Echtzeit aktualisiert)

1. Bei der Verwendung von Vue für die Entwicklung kann es zu einer Situation kommen :

Wenn Daten nach einer Vue-Instanz erneut zugewiesen werden, werden sie manchmal nicht automatisch in der Ansicht aktualisiert.

Fügen Sie dem responsiven Objekt eine Eigenschaft hinzu und stellen Sie sicher, dass diese neue Eigenschaft ebenfalls reagiert und eine Ansicht auslöst aktualisieren. Es muss verwendet werden, um neue Attribute zu reaktionsfähigen Objekten hinzuzufügen, da Vue keine normalen neuen Attribute erkennen kann und Sie die integrierten Methoden von Vue verwenden müssen Sie müssen wissen, welche Parameter Vue.set() benötigt. Offizielle API: https://cn.vuejs.org/v2/api/#Vue-set

Aufrufmethode: Vue.set(target, key, value) oder this. $set(target, key, value);

target: die zu ändernde Datenquelle (kann ein Objekt oder Array sein)

key: die spezifischen Daten, die geändert werden sollen

value: der neu zugewiesene Wert,

Aufruf: this. $set(target, key, value);

Ergänzendes Wissen: vue Render ScopedSlots

render Die allgemeine Standardverwendung von Slot ist wie folgt: this.$slots.default hat keinen Namen für die Verwendung von < Slot> mit Vorlage. Wenn Sie mehrere Steckplätze verwenden möchten. Der Slot muss eindeutig benannt werden.

Verwenden Sie dynamisch mehrere Slots in der Renderfunktion und übergeben Sie Werte an die Slots

1 Meine Geschäftslogik:

Verwenden Sie drei Komponenten,

Komponente A ruft Komponente B auf, Komponente B ruft Komponente C auf, Komponente C Es ist eine eigene gekapselte Renderkomponente.

Komponente A hofft, ihren eigenen benutzerdefinierten Steckplatz in Komponente C einfügen zu können. Komponente C rendert benutzerdefinierten Inhalt und übergibt den Wert von Komponente C an Komponente B und Komponente A. Komponente B ist eine größere Ebene auf Komponente C. Kapselung

A-Komponentenaufrufe B-Komponente

<index-grid>
     <div
      slot="name"
      slot-scope="field"
      class="check-link"
      @click="rowLinkClick"
     >
      <span>{{ field.field.rowData.name }}</span>
     </div>
</index-grid>

A-Komponente bezieht sich auf B-Komponente, Slot-Scope empfängt den von B-Komponente übergebenen Solt-Wert, Slot="Name", dient zum Benennen des Steckplatzes

Aufruf in B-Komponente Die Renderfunktion der C-Komponente

<sub-grid ref="indexGridSub">
   <span
    v-for="(item, index) in fields"
    :key="index"
    slot="name"
    slot-scope="field"
   >
    <slot name="name" :field="field"></slot>
   </span>
 
  </sub-grid>

Der Slot in Komponente B ist ein dynamischer Wert. Nur wenn er den gleichen Wert wie der Slot in Komponente A hat, kann er den von Komponente A angepassten Slot akzeptieren.

Feld wird von Komponente C übergeben. Der Wert

C-Komponente ist die Renderfunktion

h(
     "td",
     {
      style: { width: field.width + "px" },
      class: { borderRight },
      // 作用域插槽格式
      // { name: props => VNode | Array<VNode> }
      scopedSlots: this.$scopedSlots.name,
      // 如果组件是其他组件的子组件，需为插槽指定名称
      slot: &#39;name&#39;
     },
     this.$scopedSlots.name({
      field: field,
      rowData: rowData,
     })
    );

Der von der C-Komponente übergebene Wert ist das Objekt von {field: '', rowData: ''}

Empfohlenes Lernen: „

vue.js Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn Vue Daten hinzufügt, diese aber nicht aktualisiert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!