[英]Vue.js - emit to update array not working
我有两个组件:父级和子级。 父级有一个cars
数组,子级应该将对象推入cars
数组。 我的问题是我的 Child 组件将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" })
}
}
}
预期成绩:
cars
更新并变为[{ model: "some car model"}, { model: "some car model"}, etc...]
实际结果:
cars
成为一个对象{model: "some car model"}
这是我的小提琴:
https://jsfiddle.net/t121ufk5/529/
我认为我在我的子组件上使用v-model
的方式有问题和/或我发射的方式不正确。 有人可以帮忙吗? 提前致谢!
让我们讨论一下,为什么你没有得到正确的结果。然后我们讨论解决这个问题的其他方法。
首先我们需要了解默认情况下v-model
是如何在自定义组件上工作的。
当使用文本input
(包括email
、 number
等类型)或textarea
, v-model="varName"
等价于:value="varName" @input="e => varName = e.target.value"
。 这意味着在每次更新输入varName
后,将输入的值设置为varName
。 一个普通的 select 元素也会像这样,尽管多选会有所不同。
现在我们需要明白,
v-model 如何在组件上工作?
由于 Vue 不知道您的组件应该如何工作,或者它是否试图替代某种类型的输入,因此它对v-model
所有组件都一视同仁。 它实际上与文本输入的工作方式完全相同,除了在事件处理程序中,它不希望将事件对象传递给它,而是希望将值直接传递给它。 所以…
<my-custom-component v-model="myProperty" />
……和……一样
<my-custom-component :value="myProperty" @input="val => myProperty = val" />
所以当你应用这种方法时。 你必须获得value
作为道具。 并确保您$emit
name 是input
。
现在你可以在这个阶段问我,你做错了什么?
好的,看看代码@input="val => myProperty = val"
当你$emit
一个新值时。 这个newValue
将更新我们想要更新的父值。
这是您的代码this.$emit("input", { model: "some car model" })
。
你用一个对象更新你的父值。 所以你的Array
用Object
更新。
让我们解决完整的问题。
父组件:`
<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 {
props: ['value']
methods: {
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>
<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" })
}
}
}
最后的方法:
家长:
<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" })
}
}
}
孩子:
<template>
<div>
<button type="button" @click="update">Add Car</button>
</div>
</template>
export default {
methods: {
update() {
this.$emit('update')
}
}
}
可以触发更新props
传输值的事件
在父
<my-component :is-open.sync="isOpen" />
在我的组件中
this.$emit('update:isOpen', true)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.