Que dois-je faire si Vue ajoute des données mais ne les met pas à jour ?

Solution au problème selon lequel Vue ajoute des données mais ne met pas à jour : 1. Utilisez "this.$set(target, key, value);" ou "Vue.set(target, key, value)" pour ajouter des attributs ; . Dans render Utilisez plusieurs slots de manière dynamique dans la fonction et transmettez des valeurs aux slots.

L'environnement d'exploitation de ce tutoriel : système Windows 10, Vue version 3, ordinateur Dell G3.

Que dois-je faire si vue ajoute des données mais ne se met pas à jour ?

Résolvez le problème selon lequel les données de vue ne sont pas mises à jour en temps réel (les données changent, mais les données ne sont pas mises à jour en temps réel)

1. Lors du processus d'utilisation de vue pour le développement, nous pouvons rencontrer une situation :

Lors de la génération Après l'instance de vue, lorsque les données sont à nouveau attribuées, parfois elles ne seront pas automatiquement mises à jour dans la vue

Ajoutez une propriété à l'objet réactif et assurez-vous que cette nouvelle propriété est également réactive et déclenche un voir la mise à jour. Il doit être utilisé pour ajouter de nouveaux attributs aux objets réactifs, car Vue ne peut pas détecter de nouveaux attributs ordinaires et vous devez utiliser les méthodes intégrées de vue

2. Vue.set() ajoute et modifie les données de manière réactive

Pour le moment, nous Vous devez connaître les paramètres requis par Vue.set() API officielle : https://cn.vuejs.org/v2/api/#Vue-set

Méthode d'appel : Vue.set(target, key, value) ou this. $set(target, key, value);

target : la source de données à modifier (peut être un objet ou un tableau)

key : les données spécifiques à modifier

value : la valeur réaffectée,

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

Connaissances supplémentaires : vue Render scopedSlots

render L'utilisation générale par défaut de slot est la suivante : this.$slots.default n'a pas de nom pour l'utilisation de < slot> à l’aide d’un modèle. Si vous souhaitez utiliser plusieurs emplacements. L'emplacement doit être nommé de manière unique.

Utilisez dynamiquement plusieurs emplacements dans la fonction de rendu et transmettez des valeurs aux emplacements

1. Ma logique métier :

Utilisez trois composants,

Le composant A appelle le composant B, le composant B appelle le composant C, le composant C. son propre composant de rendu encapsulé.

Le composant A espère insérer son propre emplacement personnalisé dans le composant C. Le composant C restitue un contenu personnalisé et transmet la valeur du composant C au composant B et au composant A. Le composant B est une couche plus grande sur le composant C. Encapsulation

Appels du composant A Composant B

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

Un composant fait référence au composant B, slot-scope reçoit la valeur de solt transmise par le composant B, slot="name", est de nommer l'emplacement

Appel dans le composant B La fonction de rendu du composant C

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

L'emplacement dans le composant B est une valeur dynamique. Ce n'est que lorsqu'il a la même valeur que l'emplacement dans le composant A qu'il peut accepter l'emplacement personnalisé à partir du composant A.

le champ est transmis du composant C La valeur

Composant C est la fonction de rendu

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,
     })
    );

La valeur transmise par le composant C est l'objet de {field : '', rowData : ''}

Apprentissage recommandé : "tutoriel vidéo vue.js"

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!