Vue使用v-for动态增加减少的组件，数组中插入(splice)一个对象后，组件中的data都没有

Question

上类似代码

// 父组件

<template>

    <childComponents v-for="item in items" :items="items" ref="childs"></childComponents>

    <button @click="addCom"></button>

</template>

<script>

    export default {

        data() {

            return {

                items: [{},{}]

            }

        },

        methods: {

            addCom() {

                this.items.splice(1,0,{})

                this.$nextTick(()=>{

                    this.$refs.childs.forEach((v)=>{

                        console.log(v.something)

                        // first, second, second

                    })

                })

            }

        }

    }

</script>

// 子组件

<template>

    <input v-model="something"></input>

</template>

<script>

    export default {

        data() {

            return {

                something: x //假设第一个输入了first,第二个输入了second,新增的第三个应该是默认的x

            }

        }

    }

</script>

在第一二个子组件输入框输入完，点击button后，确实会在第二行增加一个子组件，但是子组件中的data不对，按照正确的格式，此时的子组件data的something应该依次是first,x,second，可是实际情况却是first,second,second，这种情况我该怎么办。。谢谢各位了

Answer 1

没复现出来这种情况啊。再说你加的是两个{a:3, b:3}。那么子组件拿到的props：['items']不应该是&nbsp;1,3,3,2吗