Vue更新数组和对象的方法

最新推荐文章于 2024-09-11 16:43:01 发布

laoluobo76

最新推荐文章于 2024-09-11 16:43:01 发布

阅读量5.9k

点赞数 1

分类专栏：逻辑python全栈学习文章标签： vue

本文链接：https://blog.csdn.net/laoluobo76/article/details/108805132

版权

在Vue中，直接修改数组或对象属性可能无法触发视图更新。正确更新数组的方法包括使用Vue.set、splice、push、unshift、pop、shift等；更新对象则需用Vue.set添加或修改属性。注意，直接赋值不会被 Vue 检测到，可能导致视图不更新。

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

1、更新数组中元素值：vue.set(this.对象,下标,新值)

由于 JavaScript 的限制，利用索引直接修改数组元素时，Vue 不能检测数组的变动：
正确的方法：
- Vue.set(vm.items, indexOfItem, newValue)
- vm.items.splice(indexOfItem, 1, newValue)
- vm.$set(vm.items, indexOfItem, newValue)
- vm即this

    <div id="app">
        <span>{
  {curstatus}}</span>
        <div v-for="(book, index) in books" v-bind:key='book'>
            <span>{
  { book }}</span>            
            <input type="text" v-bind:placeholder="book" >
        </div>
        <button @click='EditBooks'>更换图书(将python改成Python)</button>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                curstatus:"变更前",
                books:["java","python","C#"]
            },
            methods:{
                EditBooks(){
                    //不能更新视图
                    this.books[1]="Python"
                    //这样才行
                    Vue.set(this.books,1,"Python")
                    //或 this.books.splice(1,1,"Python")
                    //或 this.$set(this.books,1,"Python")
                    this.curstatus="变更后"
                },
            },
        });
    </script>

在这里插入图片描述

2、更新数组的长度：vue.set(this.对象,下标,新值)

由于 JavaScript 的限制，直接修改数组长度，Vue 不能检测数组的变动：
正确的方法： vm.items.splice(newLength)

    <div id="app">
        <span>已绑定</span>>
        <div v-for="(book, index) in books" v-bind:key='book'>
            <span>{
  { book }}</span>            
            <input type="text" v-bind:placeholder="book" >
        </div>
        <button @click='EditBooks'>更换图书(将数组长度变成2)</button>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                books:["java","python","C#"]
            },
            methods:{
                EditBooks(){
                    //不能更新视图
                    this.books.length=2
                    //这样才行                   
                    this.books.splice(2)
                },
            },
        });
    </script>

在这里插入图片描述