我研究了这个潜在的骗局,例如这个 one这并不一定能解决我的问题。
我的场景是,我有一个组织组件,其标签和复选框附加到 v 模型。该组件将与其他表单组件结合使用。目前,它可以工作 - 但即使单击两个复选框,它也只会将一个值传递回父级。
表单页面:
<template>
<section>
<h1>Hello</h1>
<list-orgs v-model="selectedOrgs"></list-orgs>
<button type="submit" v-on:click="submit">Submit</button>
</section>
</template>
<script>
// eslint-disable-next-line
import Database from '@/database.js'
import ListOrgs from '@/components/controls/list-orgs'
export default {
name: 'CreateDb',
data: function () {
return {
selectedOrgs: []
}
},
components: {
'list-orgs': ListOrgs,
},
methods: {
submit: function () {
console.log(this.$data)
}
}
}
</script>
选择组织组件
<template>
<ul>
<li v-for="org in orgs" :key="org.id">
<input type="checkbox" :value="org.id" name="selectedOrgs[]" v-on:input="$emit('input', $event.target.value)" />
{{org.name}}
</li>
</ul>
</template>
<script>
import {db} from '@/database'
export default {
name: 'ListOrgs',
data: () => {
return {
orgs: []
}
},
methods: {
populateOrgs: async function (vueObj) {
await db.orgs.toCollection().toArray(function (orgs) {
orgs.forEach(org => {
vueObj.$data.orgs.push(org)
})
})
}
},
mounted () {
this.populateOrgs(this)
}
}
</script>
当前数据库中有两个假组织,ID 分别为 1 和 2。单击两个复选框并单击提交按钮后,selectedOrgs 数组仅包含 2,就好像第二次单击实际上覆盖了第一次单击一样。我通过仅选中一个框并点击提交来验证这一点,并且 1 或 2 的值被传递。看来数组方法适用于组件级别,但不适用于父级别的组件。
感谢任何帮助。
更新
感谢 puelo 的评论,我切换了 orgListing 组件以发出附加到 v-model 的数组,如下所示:
export default {
name: 'ListOrgs',
data: () => {
return {
orgs: [],
selectedOrgs: []
}
},
methods: {
populateOrgs: async function (vueObj) {
await db.orgs.toCollection().toArray(function (orgs) {
orgs.forEach(org => {
vueObj.$data.orgs.push(org)
})
})
},
updateOrgs: function () {
this.$emit('updateOrgs', this.$data.selectedOrgs)
}
},
mounted () {
this.populateOrgs(this)
}
}
然后在另一端我只是console.log()的返回。这“有效”,但有一个缺点,似乎 $emit 是在 selectedOrgs 的值更新之前被触发的,因此它总是落后一个“检查”。实际上,我希望发出等待直到 $data 对象被更新,这可能吗?
最佳答案
非常感谢@puelo 的帮助,它帮助澄清了一些事情,但不一定解决我的问题。因为我想要的是填充数组的复选框上的 v-model
的简单性,然后将其传递给父级,同时保持封装。
所以,我做了一个小改变:
选择组织组件
<template>
<ul>
<li v-for="org in orgs" :key="org.id">
<input type="checkbox" :value="org.id" v-model="selectedOrgs" name="selectedOrgs[]" v-on:change="updateOrgs" />
{{org.name}}
</li>
</ul>
</template>
<script>
import {db} from '@/database'
export default {
name: 'ListOrgs',
data: () => {
return {
orgs: []
}
},
methods: {
populateOrgs: async function (vueObj) {
await db.orgs.toCollection().toArray(function (orgs) {
orgs.forEach(org => {
vueObj.$data.orgs.push(org)
})
})
},
updateOrgs: function () {
this.$emit('updateOrgs', this.$data.selectedOrgs)
}
},
mounted () {
this.populateOrgs(this)
}
}
</script>
表单页面
<template>
<section>
<h1>Hello</h1>
<list-orgs v-model="selectedOrgs" v-on:updateOrgs="updateSelectedOrgs"></list-orgs>
<button type="submit" v-on:click="submit">Submit</button>
</section>
</template>
<script>
// eslint-disable-next-line
import Database from '@/database.js'
import ListOrgs from '@/components/controls/list-orgs'
export default {
name: 'CreateDb',
data: function () {
return {
selectedOrgs: []
}
},
components: {
'list-orgs': ListOrgs
},
methods: {
updateSelectedOrgs: function (org) {
console.log(org)
},
submit: function () {
console.log(this.$data)
}
}
}
</script>
这里的主要变化是,当单击复选框时,我现在会触发 updateOrgs
方法,并通过 this.$emit(' 传递整个 selectedOrgs
数组updateOrgs', this.$data.selectedOrgs)`
这利用了 v-model 维护是否检查的数组。然后在表单页面上,我只需使用 v-on:updateOrgs="updateSelectedOrgs"
监听组件上的此事件,其中包含填充的数组并维护封装。
关于javascript - vuejs 将复选框数组传递给父模板仅传递一个值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51343874/