Vue がデータを追加しても更新しない場合はどうすればよいですか?

vue がデータを追加するが更新されない問題の解決策: 1. "this.$set(target, key, value);" または "Vue.set(target, key, value)" を使用して、属性の追加; 2. レンダリング関数で複数のスロットを動的に使用し、スロットに値を渡します。

#このチュートリアルの動作環境: Windows 10 システム、Vue バージョン 3、Dell G3 コンピューター。

vue がデータを追加しても更新されない場合はどうすればよいですか?

vue データがリアルタイムに更新されない問題を解決する (データは変更されますが、データがリアルタイムに更新されない)

1 vue を使用した開発の過程で、次のような状況に遭遇することがあります:

vue インスタンスが生成されるとき、データが再度割り当てられるときに、ビューに自動的に更新されないことがあります;

応答性の高いオブジェクトにプロパティを追加し、この新しいプロパティも応答性があり、ビューの更新をトリガーすることを確認します。 Vue は通常の新しいプロパティを検出できず、vue の組み込みメソッドを使用する必要があるため、応答性の高いオブジェクトに新しいプロパティを追加するために使用する必要があります

2. Vue.set() は応答的にデータを追加および変更します

この時点で、Vue.set() に必要なパラメータを知る必要があります。公式 API: https://cn.vuejs.org/v2/api/#Vue-set

呼び出しメソッド: Vue .set( target, key, value ) または this.$set(target, key, value);

target: 変更するデータ ソース (オブジェクトまたは配列にすることができます)

key: 変更する特定のデータ

value: 再割り当てされた値,

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

補足知識: vue Renderスコープ付きスロット

レンダリングにおけるスロットの一般的なデフォルトの使用法は次のとおりです: this.$slots.default には、テンプレートを使用した の使用に対する名前がありません。複数のスロットを使用したい場合。スロットには一意の名前を付ける必要があります。

レンダリング関数で複数のスロットを動的に使用し、スロットに値を渡します

1. 私のビジネス ロジック:

3 つのコンポーネントを使用しました。

#コンポーネント A はコンポーネント B を呼び出し、コンポーネント B はコンポーネント C を呼び出し、コンポーネント C は独自のカプセル化されたレンダリング コンポーネントです。

コンポーネント A は、独自のカスタム スロットをコンポーネント C に挿入したいと考えています。コンポーネント C は、カスタマイズされたコンテンツをレンダリングし、コンポーネント C の値をコンポーネント B とコンポーネント A に渡します。コンポーネント B は、コンポーネント C に対して操作を実行します。 encapsulation

A コンポーネントは B コンポーネントを呼び出します

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

A コンポーネントは B コンポーネントを参照します。slot-scope は B コンポーネントから渡された solt の値を受け取ります。slot="name"、これは、スロット;

コンポーネント C のレンダリング関数はコンポーネント B で呼び出されます

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

コンポーネント B のスパン内のスロットは動的値であり、コンポーネント A のスロットと同じ値である必要があります。 A コンポーネントのカスタム スロットから、

field は C コンポーネントから渡される値です。

C コンポーネントはレンダリング関数

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

によって渡される値です。 C コンポーネント これは、{field: ''、rowData: ''}のオブジェクトです。

推奨学習: "

vue.js ビデオ チュートリアル "

以上がVue がデータを追加しても更新しない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。