亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 Vue.js 中更新數據

在 Vue.js 中更新數據

胡說叔叔 2022-10-08 10:19:35
我正在嘗試更新使用 Vue.js 制作的數據網格,但內容沒有正確更新。這是我的 HTML:<div class="col-md-10 col-10">    <div class="row" id="grid">        <div class="col-md-4" v-for="entry in entries">            <div class="info_overlay">                <div>                    <span class="name">{{ entry.name }}</span>                    <span class="description">{{ entry.description }}</span>                </div>            </div>        </div>    </div></div>現在這是我的 JS:var _results = [{name: 'toto', description: "titi" }];var app = new Vue({  el: '#grid',  data: {    entries: _results  }})socket.on('get_entries', function(data){    console.log(_results);     console.log(data);    // Both logs show the same result (see below)    _results[0].description = data[0].description    // This works! The description of the 1st item is updated    _results = data;                                 // This doesn't work});現在我不知道為什么不能一次更新整個數組。盡管數據相同,但我確實在 Chrome 中注意到日志消息之間存在細微差別:第一個看起來像這樣:{...}, ob : Se] 0: description: (...) name: (...)第二個看起來更自然:[{…}] 0: description: "A nice pet" name: "Test pet"這兩者有區別嗎?
查看完整描述

2 回答

?
守候你守候我

TA貢獻1802條經驗 獲得超10個贊

作為一種選擇:


var _results = [{name: 'toto', description: "titi" }];

var app = new Vue({

  el: '#grid',

  data: {

    entries: _results

  }

})


socket.on('get_entries', function(data){

    console.log(_results); 

    console.log(data);

    // Both logs show the same result (see below)


    _results[0].description = data[0].description    // This works! The description of the 1st item is updated

    _results.splice(0, data.length, ...data);                                // This doesn't work


});


查看完整回答
反對 回復 2022-10-08
?
蠱毒傳說

TA貢獻1895條經驗 獲得超3個贊

我相信有一種方法可以更新整個內容array,而無需做額外JavaScript的事情來觸發反應,但使用Vue必須提供的東西。


為此,您可能需要使用掛鉤,以便我們可以使用socket來更新。created()arrow functionthisentries


這樣我們就data可以直接觸發屬性的反應。


import io from 'socket.io-client';

var _results = [{name: 'toto', description: "titi" }];

var app = new Vue({

  el: '#grid',

  data: {

    entries: _results,

    socket: io()

  },

  created() { 

   this.socket.on('get_entries', (data) => {  

    this.entries = data;                                 

   });

  }

})

這也適用于您的情況嗎?


查看完整回答
反對 回復 2022-10-08
  • 2 回答
  • 0 關注
  • 190 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號