Изменение свойств списка Vue.js

200

12 октября 2017, 13:17

Проблема в рендере списков, vue не отображает изменения свойств списка, только изменения в структуре самого списка. При нажатии кнопки change должен изменятся первый элемент списка, но это происходит лишь при изменении структуры списка, то бишь при нажатии кнопки add.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul>
        <button @click="change">change</button>
        <button @click="add">add</button>
        <button @click="restore">restore</button>
    </div>
</body>
</html>
<script src="https://unpkg.com/vue"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            arr:[1,2,3]
        },
        methods:{
            change:function(){
                this.arr[0] = 'changed';
            },
            add:function(){
                this.arr.push('added');
            },
            restore(){
                this.arr = [1,2,3];
            }
        },
    })
</script>

Answer 1

В таких случаях помогает Vue.set:

new Vue({ 
    el:'#app', 
    data(){ 
      return { 
        arr: [[1,2,3]] 
      }; 
    }, 
    methods:{ 
        change(){ 
            Vue.set(this.arr[0], 0, 'changed'); 
        }, 
        add(){ 
            this.arr.push('added'); 
        }, 
        restore(){ 
            this.arr = [1,2,3]; 
        } 
    }, 
});

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body> 
    <div id="app"> 
        <ul v-for="item in arr"> 
            <li v-for="subitem in item">{{subitem}}</li> 
        </ul> 
        <button @click="change">change</button> 
        <button @click="add">add</button> 
        <button @click="restore">restore</button> 
    </div> 
 
</body> 
</html> 
<script src="https://unpkg.com/vue"></script>

Answer 2

В документации прямо говорится, что такие изменения (в т.ч. установка по индексу, изменение длины массива) не могут быть отслежены из-за особенностей JS, поэтому нужно использовать вышеописанный Vue.set, .$set или (лучше) .splice.