[vue]——vue.set()

最新推荐文章于 2024-10-17 16:43:34 发布

虽菜但瘾

最新推荐文章于 2024-10-17 16:43:34 发布

阅读量8.4k

点赞数 6

分类专栏： Vue笔记文章标签： vue

本文链接：https://blog.csdn.net/sungoodluck666/article/details/114378510

版权

Vue笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文探讨了Vue.js中更新数组元素时遇到的问题及解决办法。当试图在没有初始值的情况下更新数组中的元素时，Vue可能不会正确地跟踪变化并重新渲染视图。文章提供了使用Vue.set方法来确保变化被侦测到的具体示例。

摘要由CSDN通过智能技术生成

当data对象中的某个值需要更新，但更新之前是没有值的状态，如果此时只是简单的修改内部的值，就会发现页面上并不会渲染更改后的值。

原因

原因就是添加新的值之后并不会将添加的值双向绑定，此时虽然更新了，但是页面并不会渲染。

解决

Vue.set()

<div id="app">
	<ul>
		<li v-for="(item, index) in tempList" :key="index">{{item}}</li>
	</ul>
	<button @click="addList">change</button>
</ div>

<script>
new Vue({
    el:"#app",
    data:{
        tempList: [
        {id: 1, name: '1'},
        {id: 2, name: '2'}
      ]
    },
    methods:{
        addList () {
            Vue.set(this.tempList, 0, {id: 3, name: '3'})
        }
    }
});
</script>

如果是在组件中使用，就不能直接使用Vue实例来调用，但是可以使用this

export default {
    data:{
        tempList: [
        {id: 1, name: '1'},
        {id: 2, name: '2'}
      ]
    },
    methods:{
        addList () {
            this.$set(this.tempList, 0, {id: 3, name: '3'})
        }
    }
};
</script>