第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

Vue.js-Vuex 更新?tīng)顟B(tài)數(shù)組中的對(duì)象未反映在組件 DOM 中

Vue.js-Vuex 更新?tīng)顟B(tài)數(shù)組中的對(duì)象未反映在組件 DOM 中

繁花如伊 2023-01-06 15:42:06
Vuex/商店:import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({    state: {        todos: [            {id: 1, text: 'Clean kitchen', done: false},            {id: 2, text: 'Clean bedroom', done: false},            {id: 3, text: 'Clean bathroom', done: false},            {id: 3, text: 'Clean clothes', done: true},        ],    },    mutations: {        x(state, data) {            state.todos[0] = data;        }    },});export default store;測(cè)試視圖:<template><div class="container">    <ul>        <li            v-for="(item, i) in todos"            :key="i"        >            <span class="description">{{ item.text }}</span>            <span class="status">{{ item.status }}</span>        </li>    </ul>    <button @click="x">Change object</button></div></template><script>import { mapState } from 'vuex';export default {    methods: {        x() {            this.$store.commit('x', {id: 34, text: 'Celebrate birthday', done: false});        }    },    computed : {        ...mapState(['todos']),    },}</script>單擊“更改對(duì)象”按鈕時(shí),我可以在 Vue Dev Tools 中看到商店的狀態(tài)已更改,但組件 Test.vue 顯示的數(shù)據(jù)沒(méi)有更改,第一個(gè) li 項(xiàng)目“Clean kitchen”仍然存在。當(dāng)我在 Vue Dev Tools 中提交更改時(shí),更改發(fā)生了。不確定我做錯(cuò)了什么。狀態(tài)https://vuex.vuejs.org/guide/state.html “每當(dāng) store.state.count 發(fā)生變化時(shí),它都會(huì)導(dǎo)致計(jì)算屬性重新評(píng)估,并觸發(fā)相關(guān)的 DOM 更新?!?
查看完整描述

1 回答

?
開(kāi)心每一天1111

TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超13個(gè)贊

你有一個(gè)反應(yīng)警告,所以你應(yīng)該使用Vue.set函數(shù):


x(state, data) {  
          Vue.set(state.todos,0,data);
        }

有關(guān)更多詳細(xì)信息,請(qǐng)檢查


查看完整回答
反對(duì) 回復(fù) 2023-01-06
  • 1 回答
  • 0 關(guān)注
  • 164 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)