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

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

組件中的 Vuejs3 反應數組

組件中的 Vuejs3 反應數組

慕桂英4014372 2023-05-25 16:17:47
我嘗試在組件中使用反應數組。它適用于對象,但不適用于對象數組。數組更新時如何更新視圖?var self = currentClassInstance // thisself.store = {    resources: Vue.reactive([]),    test:  Vue.reactive({ test: 'my super test' }),    setResources(resources) {        // this one doesn't update the view. ?        this.resources = resources    },     setResources(resources) {        // this one update the view        this.test.test = "test ok"    },  }....const app_draw = {    data() {        return {            resources: self.store.resources,            test: self.store.test,        }    },           updated() {        // triggered for "test" but not for "resources"        console.log('updated')    },           template: '<div v-for="(resource, key) in resources" :data-key="key">{{resource.name}}</div>'};....
查看完整描述

3 回答

?
德瑪西亞99

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

根據官方文檔:

Reactive
獲取一個對象并返回原始對象的反應代理。這等同于 2.x 的Vue.observable()
...。
反應式轉換是“深度”的:它影響所有嵌套屬性。在基于 ES2015 Proxy 的實現中,返回的代理不等于原始對象。建議專門使用反應式代理并避免依賴原始對象。

我建議將數組分配給反應參數中名為 value 的字段,就像您所做的那樣test

resources:?Vue.reactive({value:[]}),

然后用于resources.value=someVal更新該值。


查看完整回答
反對 回復 2023-05-25
?
交互式愛情

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

兩件事情:

  • resources: Vue.reactive({value:[]})可以通過使整個商店反應來避免

  • data()是一個本地副本,但你真的想要一個真實的單一來源(即商店),所以通過計算屬性訪問它(基本上是 Vuex 的工作方式)。

var self = currentClassInstance // this


self.store = Vue.reactive({

  resources: [],

  setResources(resources) {

    this.resources = resources

  }, 

})


const app_draw = {


  computed: {

    resources() {

      return self.store.resources

    }

  }

       

  template: '<div v-for="(resource, key) in resources" :data-key="key">{{resource.name}}</div>'

};


查看完整回答
反對 回復 2023-05-25
?
慕的地8271018

TA貢獻1796條經驗 獲得超4個贊

一個快速的方法


const resources = reactive([]);


// set resources

resources.length = 0;

resources.push(...items)


查看完整回答
反對 回復 2023-05-25
  • 3 回答
  • 0 關注
  • 166 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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