鍍金池/ 問答/HTML/ Vue-cli 使用Vue.set可以更新data(字符型)但是無法更新視圖

Vue-cli 使用Vue.set可以更新data(字符型)但是無法更新視圖

        <div class="title" >
            {{articleType}}
        </div>
<script>
import Vue from 'vue'
export default {
    data() {
        return {
            articleType:'aa',
            subList: {
                special: {
                    name: "特色服務",
                    list: []
                },
                server: {
                    name: "服務資訊",
                    list: []
                },
                about: {
                    name: "關于我們",
                    list: [
                        {
                            dataUri: "centerintro",
                            name: "中心介紹"
                        },
                        {
                            dataUri: "genTeam",
                            name: "全科團隊"
                        },
                        {
                            dataUri: "offices",
                            name: "科室介紹"
                        },
                        {
                            dataUri: "culture",
                            name: "文明風貌"
                        }
                    ]
                }
            }
        };
    },
    methods:{
        importArticle:(obj)=>{
            Vue.set(this,'articleType',obj.name)
             console.log(this.articleType);
        
           
        }
    }
};
</script>

如圖,觸發(fā)methods之后,視圖沒有改變,但是console.log()中是改變后的值。

回答
編輯回答
司令

https://jsfiddle.net/v1un4r4s...

箭頭函數不要亂用,

methods:{
        importArticle:(obj)=>{
            Vue.set(this,'articleType',obj.name)
             // 打印出來這個 this 是誰?   window,沒有指向當前vue實例
        }
    }
2018年2月11日 19:31
編輯回答
雅痞

this! this! this!
不要在不該用箭頭函數的地方用

2017年5月13日 09:50
編輯回答
醉淸風

已解決。
methods使用箭頭函數時,this不會指向vue實例。

    methods: {
        importArticle: function(obj) {
            this.articleType = obj.name;
           
        }
    }

附上文檔地址:
https://vuejs.org/v2/api/#met...

2017年6月7日 16:56
編輯回答
清夢

是的,直接賦值就可以了,不需要調用set來改變,當添加新屬性的時候才需要用set來改變值,因為新增加的屬性值沒有setter的功能

2017年4月4日 22:42
編輯回答
葬憶

這里直接賦值就行了,不需要調用set

2017年1月15日 09:57