vue改變計算屬性視圖不更新問題

有如下代碼，循環(huán)keywordList:

<div class="form-item" :key="index" v-for="(keyword, index) in keywordList">
    <input type="text"
           name="keywords"
           class="input-middle"
           placeholder="Key word"
           v-model="keywordList[index]"
           v-validate="'required'"/>
</div>

而keywordList是從vuex中獲取得到的，并經(jīng)過了處理：
      
    keywordList() {
        console.log(this.basicInfoVO.keywords.split(","))
        if (this.basicInfoVO && this.basicInfoVO.keywords) {
            return this.basicInfoVO.keywords.split(",")
        }  else {
            return []
        }
    },
    ...mapGetters([
        'warePublishData',
        'basicInfoVO',
        'isValidate'
    ])
}

同時頁面中有一個按鈕，點擊的時候，我會向keywordList中添加數(shù)據(jù)，用于增加input框：

 // 新增keyword
addKeyWord() {    
    if (this.keywordList.length <= 2) {
        Vue.set(this.keywordList, this.keywordList.length, '')
    }
 }
 
 

但是我改變了keywordList，頁面上并沒有新增input框！怎么解決這個問題？

回答

編輯回答

涼心人

你應(yīng)該把Vue.set(this.keywordList, this.keywordList.length, '')的邏輯寫在mutation里，然后在這里用dispatch分發(fā)事件

2017年9月30日 00:25

編輯回答

兔寶寶

你需要改變vuex的值，你改變本地的沒有效果的; 你應(yīng)該通過vuex 的mutations去改變vuex的數(shù)據(jù)

2017年4月17日 18:16

編輯回答

話寡

如果要直接修改計算屬性的話請在屬性里面定義set方法這里有文檔 https://cn.vuejs.org/v2/api/#...

而文檔的邏輯也只是在set方法里面修改了計算屬性的源數(shù)據(jù) 。所以你直接修改是無法觀測到并且重新渲染的。

2017年8月14日 14:59

編輯回答

舊螢火

如樓上所說，改變vues中的數(shù)據(jù)，需要把方法寫在vuex 的mutations中，再在組件中調(diào)用該方法去改變vuex的數(shù)據(jù)

告訴你一個暴力點的方法

this.$store.state.keywordList = this.$store.state.keywordList.concat(["youData"])

2018年7月28日 16:04

編輯回答

祈歡

this.keywordList.push('')

2018年6月8日 03:14

編輯回答

扯不斷

你應(yīng)該在當前組件中提交 Mutation，如：
this.$store.commit('addKeyword',data);
在vuex中更新state:
mutations: {
  addKeyword(state, data) {
    state.basicInfoVO=state.basicInfoVO.concat(data)
  }
}

2017年2月15日 22:58