javascript - vuejs 将复选框数组传递给父模板仅传递一个值

Question

我研究了这个潜在的骗局，例如这个 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 对象被更新，这可能吗？

Answer 1

非常感谢@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" 监听组件上的此事件，其中包含填充的数组并维护封装。