1

Проблема в рендере списков, 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>

2 ответа 2

0

В таких случаях помогает 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>

2
  • А как быть с двумерным массивом? 11 окт 2017 в 14:14
  • @AndrewProts обновил ответ
    – Darth
    11 окт 2017 в 14:35
0

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.