精华内容
下载资源
问答
  • 补充知识:vue中利用索引直接设置一个数组项,不能触发视图更新的问题 由于 JavaScript 的限制,Vue 不能检测以下数组的变动: 1、当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue 2、当...
  • 由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength 举个例子: var...

    注意事项

    由于 JavaScript 的限制,Vue 不能检测以下变动的数组:

    1. 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
    2. 当你修改数组的长度时,例如:vm.items.length = newLength

    举个例子:

    var vm = new Vue({
      data: {
        items: ['a', 'b', 'c']
      }
    })
    vm.items[1] = 'x' // 不是响应性的
    vm.items.length = 2 // 不是响应性的
    

    为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将触发状态更新:

    // Vue.set
    Vue.set(vm.items, indexOfItem, newValue)
    
    // Array.prototype.splice
    vm.items.splice(indexOfItem, 1, newValue)
    

    你也可以使用 vm.$set 实例方法,该方法是全局方法 Vue.set 的一个别名:

    vm.$set(vm.items, indexOfItem, newValue)
    

    为了解决第二类问题,你可以使用 splice

    vm.items.splice(newLength)
    

    对象更改检测注意事项

    还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除

    var vm = new Vue({
      data: {
        a: 1
      }
    })
    // `vm.a` 现在是响应式的
    
    vm.b = 2
    // `vm.b` 不是响应式的
    

    对于已经创建的实例,Vue 不能动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如,对于:

    var vm = new Vue({
      data: {
        userProfile: {
          name: 'Anika'
        }
      }
    })
    

    你可以添加一个新的 age 属性到嵌套的 userProfile 对象:

    Vue.set(vm.userProfile, 'age', 27)
    

    你还可以使用 vm.$set 实例方法,它只是全局 Vue.set 的别名:

    vm.$set(vm.userProfile, 'age', 27)
    

    有时你可能需要为已有对象赋予多个新属性,比如使用 Object.assign() 或 _.extend()。在这种情况下,你应该用两个对象的属性创建一个新的对象。所以,如果你想添加新的响应式属性,不要像这样:

    Object.assign(vm.userProfile, {
      age: 27,
      favoriteColor: 'Vue Green'
    })
    

    你应该这样做:

    vm.userProfile = Object.assign({}, vm.userProfile, {
      age: 27,
      favoriteColor: 'Vue Green'
    })

     

    摘录vue官网

     

    展开全文
  • 对于初级前端程序员来说,原生js基础不扎实,在敏捷开发追求效率的情况下,快速使用框架会极其容易忽视一些小的却非常关键的知识点,比如我们今天要看的《Vue数组索引项、对象属性增删无法触发更新检测》,再比如...

    对于初级前端程序员来说,原生js基础不扎实,在敏捷开发追求效率的情况下,快速使用框架会极其容易忽视一些小的却非常关键的知识点,比如我们今天要看的《Vue中数组索引项、对象属性增删无法触发更新检测》,再比如这个前端程序员就是我……

    当你在用Vue开发的时候,你可能不经常,只是偶尔地遇到,“哎?我明明把异步数据赋值给我定义的数组变量或者对象变量了,为什么页面上数据还是老旧的并没有改变呢?”,这时候你可能各种尝试,比如把生命周期函数mounted()更改为created(),于是数据的重新绑定直接被你提前到new Vue()节点;或者你在你的数据重新赋值之前插入个alert(),直接粗暴触发更新检测,但明显我们不允许在页面中出现这个;又或者机智地使用个setTimeout(function(){},0),但多测试几次,你会发现,我根本控制不了这个定时器是否一定触发,这特么到底是为什么。终于,碰了几次南墙,你想回头,(怎么可能,你必须解决这个问题,项目必须完成的呀!),所以寻求其他种种方法,绕过了这堵高墙,然后心虚地告诉自己终于解决了,但你根本不知道这里面埋了什么隐患,就等着项目交付的时候全部爆发了。好了,吹牛逼到此结束,老套路,先重现错误:

    HTML

    • name: {{data.name}},age: {{data.age}}

    JavaScript

    export default {

    name: 'inspection',

    data() {

    return {

    formData: [{

    id: 1,

    name: 'zhangsan',

    age: 20

    },{

    id: 2,

    name: 'lisi',

    age: 21

    },{

    id: 3,

    name: 'wangwu',

    age: 22

    }]

    }

    },

    mounted() {

    this.formData[0] = {

    id: 4,

    name: 'zhaoliu',

    age: 23

    };

    }

    }

    (style在这里就不做显示了)

    呐,下面就是结果啦:

    image.png

    简直是丝毫不给面子啊!所以这是为什么,你想啊,数据都挂载渲染上去了,写在mounted()里还有啥用,当然凉凉,你完全可以写在created()里,但是如果这是异步数据呢???我们凭什么保证在某个生命周期内就拿到数据,不可能的!5G都不可能的!那么怎么解决?!把目光投向Object.defineProperty(),这可是原生js的方法,牛逼的很呢!Vue的更新检测就靠这玩意操作setter()、getter()了。所以,怎么用才能随时随地触发这类数据的更新检测?官方文档给出了明确的方法,这里直接看成功示例:

    HTML

    • name: {{data.name}},age: {{data.age}}

    JavaScript

    import Vue from 'Vue'

    export default {

    name: 'inspection',

    data() {

    return {

    formData: [{

    id: 1,

    name: 'zhangsan',

    age: 20

    },{

    id: 2,

    name: 'lisi',

    age: 21

    },{

    id: 3,

    name: 'wangwu',

    age: 22

    }]

    }

    },

    mounted() {

    Vue.set(this.formData, 0 , {id: 4, name: 'zhaoliu', age: 23});

    // this.formData.splice(0, 1, {id: 4, name: 'zhaoliu', age:23});

    }

    }

    (style我就是不写好看,并且不展示出来,怎样?批评就自闭!)

    image.png

    好啦,这就成功触发Vue的更新检测啦!当然你完全可以用数组的变异方法来触发:

    push()

    pop()

    shift()

    unshift()

    splice()

    sort()

    reverse()

    提示(Tips):你无法直接替换数组项,但是你完全可以不像本文这样主动触发而改变数组项里面的属性值。关于对象,你也只是不能直接新增、删除一个键值对,但你完全可以改变其中的属性值。好了,到此就停住吧,希望能给看到这篇文章的你有所帮助,今年应该不会写新的初级知识记录了,明年见!9102新年快乐!

    展开全文
  • Vue - 数组方法

    千次阅读 2021-01-12 12:07:29
    变异方法(修改原有数组...要在Vue中使用这些数组方法就需要将它们变成响应式的,只有这样我们才能通过操作数组改变页面模板内容。变异方法主要就是体现在这一层面,Vue将原来非响应式的数组方法处理成了响应式的。...

    变异方法(修改原有数组)

    push()

    pop()

    shift()

    unshift()

    splice()

    sort()

    reverse()

    Vue对数据的处理一般都是响应式的,而原生JS数组方法对数据的处理在默认情况下都是非响应式的。要在Vue中使用这些数组方法就需要将它们变成响应式的,只有这样我们才能通过操作数组来改变页面模板内容。变异方法主要就是体现在这一层面,Vue将原来非响应式的数组方法处理成了响应式的。这些方法的共性就是都会影响原始的数组数据。

    替换数组(生成新的数组)

    filter()

    concat()

    slice()

    以上三个方法的共性是返回一个新的数组,通过新的数组替换旧的数组来实现影像数据的变化,而不会改变原来数组的数据。

    下面举个栗子来综合演示一下Vue是如何使数组方法变成响应式的。

    以上就是响应式的效果,数据的变化直接影响页面内容的变化。

    下面再写一个删除数据的效果让整个栗子更加完整。

    以上响应式的效果是通过变异方法来实现的。下面看看替换数组如何实现响应式效果。

    除了用上面的API对数组进行操作

    展开全文
  • 将 “苹果” 变成 “香蕉”,打印数组,发现数值变了,但是页面没有渲染 <body> <section id="demo"> <ul> <li v-for="item in aaa"> {{item}} </li> </ul> <button...

    问题:
    将 “苹果” 变成 “香蕉”,打印数组,发现数值变了,但是页面没有渲染
    在这里插入图片描述

    <body>
    <section id="demo">
        <ul>
            <li v-for="item in aaa">
                {{item}}
            </li>
        </ul>
    
        <button @click="change">将苹果变成香蕉</button>
    </section>
    
    <script>
        // 定义vue范围及监听的变量
        new Vue({
            el: '#demo',
            data: {
                aaa: ['苹果', '橘子', '梨']
            },
            methods:{
                change(){
                    this.aaa[0] = '香蕉'
                    console.log(this.aaa)
                }
            }
        })
    </script>
    

    解决方案:

    将 change 方法里

    this.aaa[0] = '香蕉'
    

    改成

    this.$set(this.aaa, 0, '香蕉')
    
    展开全文
  • 数组在长度不变的前提下通过索引修改内容,视图不会自动更新 原因:当在vue对象的data定义变量时,vue内部会自动生成这个变量的set和get函数,set函数用于把data中的数据渲染到视图上,更新视图,get函数用于把视图...
  • 详解VUE 数组更新

    2020-12-23 07:02:01
    1、数据方法分类:(1)原数组改变pushpopunshiftshiftreversesortsplice(2)原数组未变,生成新数组sliceconcatfilter对于使原数组变化的方法,可以直接更新视图。对于原数组未变的方法,可以使用新数组替换原来的数组...
  • vue 观察数组的变异方法 更新视图push()pop()shift()unshift()splice(i,n,arr)sort(xx)reverse()ex: app.book.push({name:'css',author:'lee'})有些方法不会改变数组filter()concat()slice()返回新数组 需要用 新...
  • 由于 JavaScript 的限制,Vue不能检测数组和对象的变化,在我们改变数组和对象的数据时,页面没有办法响应式改变。因此,我们要采用一些特殊的方法来让页面响应数组和对象的改变数组 Vue 不能检测以下数组的变动...
  • 11. VUE 数组操作

    千次阅读 2020-12-31 10:09:37
    变异方法Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:push() 添加元素{{ item.message }} varexample1= newVue({el:'#example-1',data: {items: [{message:'Foo'},{message:'Bar'}]...
  • Vue 数组操作

    千次阅读 2019-12-09 19:00:42
    Vue 数组操作 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下: push() 添加元素 <ul id="example-1"> <li v-for="item in items" :key="item.id">{{ item.message }} <...
  • 原文链接:http://www.cnblogs.com/sufubo/p/6906261.html#undefined问题:...查看官网发现:由于 JavaScript 的限制,Vue 不能检测以下变动的数组:当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = new...
  • 当你修改数组的长度时,例如:vm.items.length = newLength对于第一种情况,可以使用:Vue.set(example1.items, indexOfItem, newValue);而对于第二种情况,可以使用 vm.items.splice(newLengt...
  • Vue数组更新方法

    千次阅读 2020-12-23 07:02:07
    Vue包含了一组观察数组变异的方法,使用他们改变数组也会触发视图更新。push()pop()shift()unshift()splice()sort()reverse()比如以下例子:{{ book.name }}JavaScript代码:var app = new Vue({el...
  • Vue 数组更新与排序过滤

    千次阅读 2019-05-20 18:06:29
    前面的话 Vue 的核心是数据与视图的双向绑定,当我们...这篇文章将介绍Vue数组更新及过滤排序。 变异方法 Vue包含了一组观察数组变异的方法,使用它们改变数组也会触发视图更新。 ● push() 接受任意数量的参数,把...
  • 导读热词做checkBox多选功能的时候遇到了一个坑,逻辑怎么看都对,但是就是...数组更新检测变异方法Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:push()pop()shift()unshift()splic...
  • 文章目录VUE数组的变异方法(变更方法)一、结论二、使用步骤1.引入库2.读入数据总结 VUE数组的变异方法(变更方法) :在 Vue 中,直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值,你会发现,只有...
  • newValue //重新渲染页面 self.render() } }) } } } //更新部分 Vue.prototype.render = function(){ this.virtualdom = '这个是要改变的数据' + this.$data.a this.el.innerHTML = this.virtualdom } 创建一个index...
  • 我调用方法根据商品id从后端查询到这个商品对应的所有订单号,然后赋值在表格对应商品...每次只有第一条表格信息中下拉框进行改变时,后面扫进来的数据中下拉框才会出现值,不然刚进来都是无数据</p>
  • 相信大家都知道,在vue2.0x中,使用数组下标改变值时,是不会触发响应式的 以下来自:Vue官方文档 Vue 不能检测以下数组的变动: 当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue 当你...
  • 对于vue数组内容修改不同步的问题

    千次阅读 2019-03-01 13:45:47
    今天遇到了一个问题,...在vue官方文档里,明确数组更新检测规则: 我们只有使用以上函数才会触发视图的更新,同时官方也给出了相应的解释 解决方案: 还有一些可能出现的问题,全部都可以在官方文档上找到答案… ...
  • 解决Vue数组更新不渲染的问题

    万次阅读 2019-01-06 17:39:41
    当使用索引直接赋值和直接修改数组长度时,Vue不能检测出变动的数组。 这样写页面显示的是共0个 &lt;span class="pull-right"&gt;已全部加载,共{{fileDatas.length}} 个&lt;/span&gt; ...
  • 一句话:先抛结论,在vue中通过索引修改数组中的数据页面是不会改变的也就不是响应式 以下是具体的代码案例 var vm = new Vue({ el: '#app', data: { // 数组类型的类型 list: ['apple', 'orange', 'banana', { ...
  • vue js删除数组中指定索引的元素

    千次阅读 2020-12-31 11:11:57
    在前端开发中,我们...注意:这种方法会改变原始数组。 数组中添加新元素: var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2,0,"Lemon","Kiwi"); fruits输出结果: Banana,Orange,Le.
  • 然后把值保存到数组中,调接口保存数据。 在功能实现后,测试的时候发现,我只保存了一条数据,但是传参却传了两条一样id的,内容不一样的。 这是因为我在失去焦点的事件中,通过push,把内容保存到数组中,每一次...
  • 进行更改的方式不起作用,改变了data中的arr数组,但是未能正确渲染到页面中。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,849
精华内容 4,339
关键字:

vue的数组索引改变

vue 订阅