Vue が配列またはオブジェクトの変更を検出できない問題を解決するにはどうすればよいですか?-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Vue が配列またはオブジェクトの変更を検出できない問題を解決するにはどうすればよいですか?

亚连

Jun 04, 2018 pm 04:32 PM

できない配列検出

以下に、Vue が配列またはオブジェクトの変更を検出できない問題を解決する記事を共有します。これは優れた参考値なので、皆さんのお役に立てれば幸いです。

例を見てみましょう:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue</title>
 <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
 <style>
 li:hover {
  cursor: pointer;
 }
 </style>
</head>
<body>
 <p class="wrap">
 <ul>
  <li v-for="item,index in items" v-on:click="handle(index)">
  <span>{{item.name}}</span>
  <span>{{numbers[index]}}</span>
  </li>
 </ul>
 </p>
 <script>
 var vm = new Vue({
  el: ".wrap",
  data: {
  numbers: [],
  items: [
   {name: &#39;jjj&#39;},
   {name: &#39;kkk&#39;},
   {name: &#39;lll&#39;},
  ]
  },
  methods: {
  handle: function (index) {
   // WHY: 更新数据，view层未渲染，但通过console这个数组可以发现数据确实更新了
   if (typeof(this.numbers[index]) === "undefined" ) {
   // 注：下面这么设置是可以的。例如 
   // var arr = [];
   // arr[3]=3;
   // console.log(arr) //[empty × 3, 3]
    this.numbers[index] = 1; 
   // this.numbers.splice(index,0,1) //用splice方法能同步显示，但得不到想要的效果
   } else {
    this.numbers[index]++;
   // this.numbers.splice(index,1,this.numbers[index]++)
   }
  // console.log(this.numbers)
  }
  }
 });
 
 </script>
</body>
</html>

ログイン後にコピー

実現したい効果は、li をクリックして vm.nymbers[index] が存在するかどうかを確認することです。存在しない場合は 1 に設定します。、1を追加します。

クリック後、ビューレイヤーでは数値が更新されませんでしたが、コンソールの印刷により、データが更新されたことがわかりましたが、ビューレイヤーではそれを検出できませんでした。

別の変更を見てください:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue</title>
 <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
 <style>
 li:hover {
  cursor: pointer;
 }
 </style>
</head>
<body>
 <p class="wrap">
 <ul>
  <li v-for="item,index in items" v-on:click="handle(index)">
  <span>{{item.name}}</span>
  <!--<span>{{numbers[index]}}</span>-->
  </li>
 </ul>
 </p>
 <script>
 var vm = new Vue({
  el: ".wrap",
  data: {
  // numbers: [],
  items: [
   {name: &#39;jjj&#39;},
   {name: &#39;kkk&#39;},
   {name: &#39;lll&#39;},
  ]
  },
  methods: {
  handle: function (index) {
   // 不是数组，这里更新数据就可以直接在view层渲染
   this.items[index].name += " success";
  // console.log(this.numbers)
  }
  }
 });
 </script>
</body>
</html>

ログイン後にコピー

ここのビューレイヤーは時間内に更新できることがわかりますが、配列に関してはなぜ更新できないのでしょうか?

Vue2.0 の公式ドキュメントを参照してください:

JavaScript の制限により、Vue は次の変更された配列を検出できません:

インデックスを使用して項目を直接設定する場合 (例: vm.items) [indexOfItem ] = newValue

配列の長さを変更する場合、たとえば: vm.items.length = newLength

最初のタイプの問題を解決するには、次の 2 つの方法で vm と同じ効果を達成できます。 items[indexOfItem] = newValue 、ステータス更新もトリガーします:

// Vue.set 
Vue.set(example1.items, indexOfItem, newValue)

ログイン後にコピー

// Array.prototype.splice 
example1.items.splice(indexOfItem, 1, newValue)

ログイン後にコピー

また、グローバル Vue.set のエイリアスである vm.$set インスタンスメソッドを使用することもできます。

または、JavaScript の制限により、Vue はオブジェクトプロパティの追加または削除を検出できません:

var vm = new Vue({
 data: {
 a: 1
 }
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的

ログイン後にコピー

すでに作成されたインスタンスの場合、Vue はルートレベルの応答プロパティを動的に追加できません。ただし、Vue.set(object, key, value) メソッドを使用して、ネストされたオブジェクトにリアクティブプロパティを追加できます。例:

var vm = new Vue({ 
 data: { 
 userProfile: { 
  name: &#39;Anika&#39; 
 } 
 } 
})

ログイン後にコピー

場合によっては、Object.assign() や _.extend() を使用するなど、複数の新しいプロパティを既存のオブジェクトに割り当てる必要があります。この場合、両方のオブジェクトのプロパティを使用して新しいオブジェクトを作成する必要があります。したがって、新しい応答属性を追加したい場合は、次のようにするのではなく:

Object.assign(this.userProfile, { 
 age: 27, 
 favoriteColor: &#39;Vue Green&#39; 
})

ログイン後にコピー

次のようにする必要があります:

this.userProfile = Object.assign({}, this.userProfile, { 
 age: 27, 
 favoriteColor: &#39;Vue Green&#39; 
})

ログイン後にコピー

したがって、上記の例は次のように変更する必要があります:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue</title>
 <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
 <style>
 li:hover {
  cursor: pointer;
 }
 </style>
</head>
<body>
 <p class="wrap">
 <ul>
  <li v-for="item,index in items" v-on:click="handle(index)">
  <span>{{item.name}}</span>
  <span>{{numbers[index]}}</span>
  </li>
 </ul>
 </p>
 <script>
 var vm = new Vue({
  el: ".wrap",
  data: {
  numbers: [],
  items: [
   {name: &#39;jjj&#39;},
   {name: &#39;kkk&#39;},
   {name: &#39;lll&#39;},
  ]
  },
  methods: {
  handle: function (index) {
   if (typeof(this.numbers[index]) === "undefined" ) {
    this.$set(this.numbers, index, 1);  //(arr,index,newvalue)
   } else {
    this.$set(this.numbers, index, ++this.numbers[index]);
   }
  }
  }
 });
 </script>
</body>
</html>

ログイン後にコピー

完了!

1.17補足---------------------------------

「ある人にとって」の理解方法インスタンスが作成されているため、Vue はルートレベルのリアクティブプロパティを動的に追加できません。」

例:

var vm=new Vue({ 
 el:&#39;#test&#39;, 
 data:{ 
  //data中已经存在info根属性 
  info:{ 
   name:&#39;小明&#39; 
  } 
 } 
}); 
//给info添加一个性别属性 
Vue.set(vm.info,&#39;sex&#39;,&#39;男&#39;);

ログイン後にコピー

上記は正しいアプローチですが、次のことを実行するとエラーが報告されます:

Vue.set(vm.data,&#39;sex&#39;,&#39;男&#39;)

ログイン後にコピー

実際には、データに属性を直接追加することはできませんが、属性を追加することはできますデータ内のオブジェクトに。

実際には vm.data は未定義です。

上記は私があなたのためにまとめたものです。

NodeJSの親プロセスと子プロセスのリソース共有原理と実装方法

Vueの携帯電話番号、メール定期認証、60秒送信認証コードの例

Vueがアクティブクリック切り替え方式を実装

以上がVue が配列またはオブジェクトの変更を検出できない問題を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7457

CakePHP チュートリアル

1376

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

MIT の最新傑作: GPT-3.5 を使用して時系列異常検出の問題を解決する Jun 08, 2024 pm 06:09 PM

今日は、MIT が先週公開した記事を紹介します。GPT-3.5-turbo を使用して時系列異常検出の問題を解決し、時系列異常検出における LLM の有効性を最初に検証しました。プロセス全体に微調整はなく、GPT-3.5-turbo は異常検出に直接使用されます。この記事の核心は、時系列を GPT-3.5-turbo が認識できる入力に変換する方法とその設計方法です。 LLM が異常検出タスクを解決できるようにするためのプロンプトまたはパイプライン。この作品について詳しく紹介していきます。画像用紙タイトル：Large languagemodelscanbeゼロショタノマリデテ

foreach ループを使用して PHP 配列から重複要素を削除するにはどうすればよいですか? Apr 27, 2024 am 11:33 AM

foreach ループを使用して PHP 配列から重複要素を削除する方法は次のとおりです。配列を走査し、要素がすでに存在し、現在の位置が最初に出現しない場合は、要素を削除します。たとえば、データベースクエリの結果に重複レコードがある場合、このメソッドを使用してそれらを削除し、重複レコードのない結果を取得できます。

改良された検出アルゴリズム: 高解像度の光学式リモートセンシング画像でのターゲット検出用 Jun 06, 2024 pm 12:33 PM

01 今後の概要現時点では、検出効率と検出結果の適切なバランスを実現することが困難です。我々は、光学リモートセンシング画像におけるターゲット検出ネットワークの効果を向上させるために、多層特徴ピラミッド、マルチ検出ヘッド戦略、およびハイブリッドアテンションモジュールを使用して、高解像度光学リモートセンシング画像におけるターゲット検出のための強化されたYOLOv5アルゴリズムを開発しました。 SIMD データセットによると、新しいアルゴリズムの mAP は YOLOv5 より 2.2%、YOLOX より 8.48% 優れており、検出結果と速度のバランスがより優れています。 02 背景と動機リモートセンシング技術の急速な発展に伴い、航空機、自動車、建物など、地表上の多くの物体を記述するために高解像度の光学式リモートセンシング画像が使用されています。リモートセンシング画像の判読における物体検出

PHP 配列キー値の反転: さまざまな方法のパフォーマンス比較分析 May 03, 2024 pm 09:03 PM

PHP の配列キー値の反転メソッドのパフォーマンスを比較すると、array_flip() 関数は、大規模な配列 (100 万要素以上) では for ループよりもパフォーマンスが良く、所要時間が短いことがわかります。キー値を手動で反転する for ループ方式は、比較的長い時間がかかります。

PHP 配列ディープコピーの技術: さまざまな方法を使用して完璧なコピーを実現する May 01, 2024 pm 12:30 PM

PHP で配列をディープコピーする方法には、json_decode と json_encode を使用した JSON エンコードとデコードが含まれます。 array_map と clone を使用して、キーと値のディープコピーを作成します。シリアル化と逆シリアル化には、serialize と unserialize を使用します。

PHP 配列の多次元ソートの実践: 単純なシナリオから複雑なシナリオまで Apr 29, 2024 pm 09:12 PM

多次元配列のソートは、単一列のソートとネストされたソートに分類できます。単一列のソートでは、array_multisort() 関数を使用して列ごとにソートできますが、ネストされたソートでは、配列を走査してソートするための再帰関数が必要です。具体的な例としては、製品名による並べ替えや、売上数量や価格による化合物の並べ替えなどがあります。

PHP 配列のディープコピーのベストプラクティス: 効率的な方法を発見する Apr 30, 2024 pm 03:42 PM

PHP で配列のディープコピーを実行するためのベストプラクティスは、 json_decode(json_encode($arr)) を使用して配列を JSON 文字列に変換し、それから配列に戻すことです。 unserialize(serialize($arr)) を使用して配列を文字列にシリアル化し、それを新しい配列に逆シリアル化します。 RecursiveIteratorIterator を使用して、多次元配列を再帰的に走査します。