vue v-for的数组改变导致页面不渲染解决方法

直接在数组里,改变数组来达到重新渲染页面的目的，需要用push等数组方法，或者$set(),或者给数组重新赋值，来改变数组引用地址而是直接索引=<body><div id="app"><li v-for='item in students'><span>{{ item.name }}...

weixin_34289454

3344人浏览 · 2019-01-09 15:46:00

weixin_34289454 · 2019-01-09 15:46:00 发布

直接在数组里,改变数组来达到重新渲染页面的目的，

需要用push等数组方法，

或者$set(),或者给数组重新赋值，来改变数组引用地址

而是直接索引=

<body>
    <div id="app">
     <li v-for='item in students'>
         <span>{{ item.name }}</span>
         <span>{{ item.age }}</span>
     </li>
       <button @click='addStudent'>click</button>

<button @click='$ set(students,3,{name:"xioaming",age:102333})'>click</button>

<button @click=' Vue.set(students,3,{name:"xioaming",age:102333})'>click</button>

    </div>
    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                students: [
                    {name:"xioaming",age:10},
                    {name:"xioaming",age:101},
                    {name:"xioaming",age:102}
                ]
            },
            methods: {
                addStudent: function(){
                   this.students[3] =   {name:"xioaming",age:102333}//这样不能重新渲染页面
this.students.push({name:"xioaming",age:102333})
 } } }) </script>

转载于:https://www.cnblogs.com/dangdanghepingping/p/10244812.html

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^