VueJS：Chrome devtools不会立即更新数组（在父组件中）。为什么？

Question

在以下代码中，我试图通过数组selectedUsers（在父级中定义）中的复选框输入（在子级组件中定义）从给定用户（用户数组）列表中选择用户。

问题是当我检查/选择用户时，devtools不会在第一反应时更新。我必须离开devtools中选定的组件，然后再回来查看更新后的数组。

app.vue（父级）

<template>
    <div class="container">
        <div class="row">
            <div v-for="(user,idx) in users" class="col-xs-12 col-md-6 col-md-offset-3">
                <child :user="user" :userIdx="idx" :selectedUsers="selectedUsers" /> <span>{{user.name }}</span>
            </div>
        </div>
    </div>
</template>

<script>
    import child from './child.vue'

    export default {
        data: function() {
            return{
                users: [
                 {id: 1, name: 'Allen'},
                 {id: 2, name: 'Jack'},
                 {id: 3, name: 'Obama'},
                 {id: 4, name: 'Donald'},
                 {id: 5, name: 'Winston'},

                selectedUsers: []
            }
        },
        components: {
            child
        }
    }
</script>

child.vue（孩子）

<template>
    <span>
        <input type="checkbox" :value="user.name" @change="onSelectedUser">
    </span>
</template> 

<script>
    export default {
        props: ['user', 'userIdx', 'selectedUsers'],
        data(){
        },
        methods: {
            onSelectedUser() {
                var idx = this.userIdx

                if(event.target.checked) {
                    this.selectedUsers[idx] = event.target.value
                } 

                if(event.target.checked == false) {
                    this.selectedUsers.splice(idx, 1)
                }
            }
        }
    }
</script>

<style scoped>
    input[type="checkbox"] {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        border: 3px solid red;
    }
    input[type="checkbox"]:checked {
        width: 30px;
        height: 30px;
    }
</style>

谢谢

Answer 1

在这行代码this.selectedUsers[idx] = event.target.value中，我直接设置了Array的值，而vue无法将这些直接修改用于数组。

摘录自以下链接页面

  

通过直接设置索引（例如arr [0] = val）或修改其length属性来修改Array时。同样，Vue.js无法获取这些更改。

更多信息VueJS common gotchas - why DOM isn't updating