Javascript Vue.js-发射以更新阵列不工作

我有两个组件：父级和子级。父对象有一个

cars

数组，子对象应该是

cars

数组中的push对象。我的问题是，我的子组件将

cars

转化为一个对象，而不是将对象推入

cars

数组。我的父组件：

<template>
   <child v-model="cars"></child>
    <ul>
      <li v-for="car in cars">
         {{ car.model }}
      </li>
    </ul>
</template>

export default {
 data: function() {
  return {
    cars: []
  }
 }
}

<template>
    <div>
        <button type="button" @click="addCar()">Add Car</button>
    </div>
</template>

export default {
    methods: {
        addCar() {
            this.$emit("input", { model: "some car model" })
        }
    }
}

{{car.model}}


导出默认值{
数据：函数（）{
返回{
汽车：[]
}
}
}

我的孩子部分：

<template>
   <child v-model="cars"></child>
    <ul>
      <li v-for="car in cars">
         {{ car.model }}
      </li>
    </ul>
</template>

export default {
 data: function() {
  return {
    cars: []
  }
 }
}

<template>
    <div>
        <button type="button" @click="addCar()">Add Car</button>
    </div>
</template>

export default {
    methods: {
        addCar() {
            this.$emit("input", { model: "some car model" })
        }
    }
}

加车
导出默认值{
方法：{
addCar（）{
这个.$emit（“输入”{model:“某个汽车模型”}）
}
}
}

预期成果：

cars

得到更新并成为

[{model:“some car model”}、{model:“some car model”}等..]

实际结果：

cars

成为对象

{model:“某个汽车模型”}

这是我的小提琴：

---

我假设我在我的子组件上使用

v-model

的方式有问题和/或我发射的方式不正确。有人能帮忙吗？提前谢谢

让我们讨论一下，为什么不能得到正确的结果。然后我们讨论解决这个问题的其他方法

首先，我们需要了解默认情况下

v-model

如何在自定义组件上工作

使用文本

输入时（包括
电子邮件
、
数字等类型）或
文本区域
，
v-model=“varName”
相当于
：value=“varName”@input=“e=>varName=e.target.value”
。这意味着在每次更新输入后，输入的值被设置为
varName
，
varName
被更新为输入值。一个普通的select元素也会这样做，尽管多个select元素是不同的

现在我们需要了解

v-model如何在组件上工作？

由于Vue不知道您的组件应该如何工作，或者如果它试图充当某种类型输入的替代品，那么它对
v-model
的所有组件都一视同仁。它实际上与文本输入的工作方式完全相同，只是在事件处理程序中，它不希望事件对象传递给它，而是希望值直接传递给它。所以


…和…是一样的


所以当你应用这种方法时。您必须接收
值作为道具。并确保
$emit
名称为
input

现在你可以在这个阶段问我，你做错了什么

好的，看看下面的代码
@input=“val=>myProperty=val”

使用新值
$emit
时。此
newValue
将更新您要更新的父值

这是您的代码
this.$emit（“输入”{model:“某个车型”}）

使用对象更新父值。因此，您的
数组
更新为
对象

让我们来解决全部问题

父组件：
`




{{car.model}}


导出默认值{
数据：函数（）{
返回{
汽车：[]
}
}
}

`

子组件：

<template>
    <div>
        <button type="button" @click="addCar()">Add Car</button>
    </div>
</template>

export default {
    props: ['value']
    methods: {
        addCar() {
            this.$emit("input", this.value.concat({model: "some car model"}))
        }
    }
}


加车
导出默认值{
道具：['value']
方法：{
addCar（）{
this.$emit（“input”，this.value.concat（{model:“some car model”}））
}
}
}

实际上，你可以用几种方法来解决它

第二种方法

家长：

<template>
   <child :cars="cars"></child>
    <ul>
      <li v-for="car in cars">
         {{ car.model }}
      </li>
    </ul>
</template>

export default {
 data: function() {
  return {
    cars: []
  }
 }
}

    <template>
        <child @update="addCar"></child>
            <ul>
                <li v-for="car in cars">
                    {{ car.model }}
                </li>
            </ul>
    </template>

    export default {
        data() {
            return {
                cars: []
            }
        }
   },
   methods: {
      addCar() {
           this.cars.push({ model: "some car model" })
      }
   }
}




{{car.model}}


导出默认值{
数据：函数（）{
返回{
汽车：[]
}
}
}

儿童：

<template>
    <div>
        <button type="button" @click="addCar">Add Car</button>
    </div>
</template>

export default {
    props: {
       cars: {
          type: Array,
          default:[]
       }
    },
    methods: {
        addCar() {
            this.cars.push({ model: "some car model" })
        }
    }
}


加车
导出默认值{
道具：{
汽车：{
类型：数组，
默认值：[]
}
},
方法：{
addCar（）{
this.cars.push（{model:“some car model”}）
}
}
}

最后一种方法：

家长：

<template>
   <child :cars="cars"></child>
    <ul>
      <li v-for="car in cars">
         {{ car.model }}
      </li>
    </ul>
</template>

export default {
 data: function() {
  return {
    cars: []
  }
 }
}

    <template>
        <child @update="addCar"></child>
            <ul>
                <li v-for="car in cars">
                    {{ car.model }}
                </li>
            </ul>
    </template>

    export default {
        data() {
            return {
                cars: []
            }
        }
   },
   methods: {
      addCar() {
           this.cars.push({ model: "some car model" })
      }
   }
}




{{car.model}}


导出默认值{
数据（）{
返回{
汽车：[]
}
}
},
方法：{
addCar（）{
this.cars.push（{model:“some car model”}）
}
}
}

儿童：

 <template>
     <div>
        <button type="button" @click="update">Add Car</button>
     </div>
    </template>

    export default {
        methods: {
            update() {
                this.$emit('update')
            }
        }
    }


加车
导出默认值{
方法：{
更新（）{
此。$emit（'update'）
}
}
}
可以触发更新
道具中传输值的事件

父项中的

<my-component :is-open.sync="isOpen" />

this.$emit('update:isOpen', true)

关于前几个解决方案，最新的Vue文档表示，属性的数据流应该是单向的，从父级到子级。因此，在自定义事件中发出值似乎是这里推荐的方法。()