如何在 Vuejs 中使用数组在父组件和子组件之间应用手表

Question

我制作了如下所示的父组件。

// parent component

<template>
   <layout
    v-for="(value, idx) in array"
    :pickUpLength="array.length"
    :idx="idx"
    :key="idx"
   >
   <button @click="addArray">add</add>
</template>

data(){
  array:[
     {"date" : "", "time": ""},
     {"date" : "", "time": ""}
  ]
}
methods:{
  addArray(){
     this.array.splice(this.array.length - 1, 0, {"yes":"no"})
  }

并且有一个子组件。

<template>

</template>

props:["pickUpLength"],
watch:{
    pickUpLength:{
      handler(){
          console.log(idx)
      }
   }
}

当我单击父组件中的 addArray 按钮时，子组件的 pickUpLength 也会更改。
因此，手表有效。 但问题是 console.log(idx) 只给出“0, 1”。 但在这种情况下，总 idx 是“3”而不是 2。
所以我期待“0,1,2”。 我不知道是哪个问题。 你能推荐一些解决方案吗？ 非常感谢你阅读它。

Answer 1

 <template> <layout v-for="(value, idx) in array":pickUpLength="array.length":idx="idx":key="idx" > <button @click="addArray">add</add> </template> <script> export default { data() { array:[ {"date": "", "time": ""}, {"date": "", "time": ""} ] }, methods:{ addArray(newVal){ // This is what you are doing. You can't "watch" arrays or Objects in Vue.js v2.xx (changing in v3.xx). // this.array.splice(this.array.length - 1, 0, {"yes":"no"}) // This is what you have to do in this situation (based upon your comments from my original answer): this.array = this.array.slice(0, this.array.length - 1).concat(newVal, this.array[this.array.length - 1]); } } }; </script>