Vueデータモニタリングピットレコード

通常Vueでコードを書く場合、Vueの監視メカニズムにより、ページデータを変更する際に直接ページを更新できますが、監視できない場合があります。

例えば：

// 获取报表
        public async getChannelList() {
            this.channelList = await getChannels();
            this.channelList.forEach(item => {
                item.isSelected = false
            })
        }

ここでは、channelListを取得してから、各アイテムにisSelected属性を指定する必要があります。しかし、使用の過程でデータは更新されましたが、ページが応答していません。
ここに画像の説明を挿入
図に示すように、2番目のデータのisSelectedをtrueに変更しましたが、ページ表示はまだfalseです。
最初は非同期データページが原因だと思ったので、データバインディングにnextTickと$ setを使用しましたが、それでも解決できませんでした。

——————————————————————————————————

理由

Vueは、初期化時にデータを詳細にトラバースします（インタビューで頻繁に記憶されるコンテンツは繰り返されません）最初のステップでページデータに値を割り当てると、実際、Vueはすでにさまざまな属性の監視を行っています、これは2番目につながります。ページデータに属性を追加する必要がある場合、vueはisSelected属性を監視しません。
ここに画像の説明を挿入

解決

1.ページ初期化データの場合は、すべての初期属性を書き出し、Vueにすべての属性を監視させます
2

public async getChannelList() {
            let data:any = await getChannels();
            data.forEach(item => {
                item.isSelected = false
            });
            this.channelList = JSON.parse(JSON.stringify(data))
        }

まず、空のデータを使用して取り出したデータを取得し、次にこのデータを操作して必要な他の属性を新たに作成し、最後に1回限りの割り当てを実際のページにレンダリングされた配列オブジェクトにディープコピーします。

総括する

コードは標準化されておらず、2行の髪が残っています。