- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我有两个组件:父组件和子组件。 Parent 有一个 cars
数组,Child 应该将对象推送到 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"}
这是我的 fiddle :
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
被更新为输入的值。一个普通的选择元素也会像这样,尽管多选会有所不同。
现在我们需要明白,
v-model 如何在组件上工作?
由于 Vue 不知道您的组件应该如何工作,或者如果它试图替代某种类型的输入,它会以相同的方式对待所有组件 v-model
.它实际上与文本输入的工作方式完全相同,除了在事件处理程序中,它不期望将事件对象传递给它,而是期望将值直接传递给它。所以……
<my-custom-component v-model="myProperty" />
……和……一样
<my-custom-component :value="myProperty" @input="val => myProperty = val" />
所以当你应用这种方法时。您必须收到 value
作为 Prop 。并确保你 $emit
名字是input
.
现在你可以问我,你做错了什么?
好的,看看类似的代码@input="val => myProperty = val"
当你 $emit
一个新的值(value)。这个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: []
}
}
}
child :
<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" })
}
}
}
child :
<template>
<div>
<button type="button" @click="update">Add Car</button>
</div>
</template>
export default {
methods: {
update() {
this.$emit('update')
}
}
}
关于javascript - Vue.js - 发出更新数组不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51694797/
今天有小伙伴给我留言问到,try{...}catch(){...}是什么意思?它用来干什么? 简单的说 他们是用来捕获异常的 下面我们通过一个例子来详细讲解下
我正在努力提高网站的可访问性,但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接,因
说现在是 6 点,我有一个 Timer 并在 10 点安排了一个 TimerTask。之后,System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我就废话不多说了,大家还是直接看代码吧~ ? 1
Maven系列1 1.什么是Maven? Maven是一个项目管理工具,它包含了一个对象模型。一组标准集合,一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。 核心功能 Mav
我是一名优秀的程序员,十分优秀!