将 getter 数组绑定到复选框组答案

【问题标题】：Binding getter array to checkbox group将 getter 数组绑定到复选框组
【发布时间】：2026-01-27 04:20:03
【问题描述】：

我有一个两页的表单，所以我尝试混合向服务器提交数据以及使用 vuex。所以在第一页，我有一个简单的表单，其中包含一组复选框（删除布局和样式以减少代码）

<b-form @submit.stop.prevent="onSubmit">
    <b-form-group>
        <input v-model="$v.form.checkboxGroup.$model" type="checkbox" name="checkbox1" value="1">
        <input v-model="$v.form.checkboxGroup.$model" type="checkbox" name="checkbox2" value="2">
        <input v-model="$v.form.checkboxGroup.$model" type="checkbox" name="checkbox3" value="3">
    </b-form-group>

    <button class="btn try-btn" type="submit">Submit</button>
</b-form>

基本上，提交时，我会将表单数据发送到我的存储库，以便可以将其保存在后端。如果这样成功，我调用下面的方法

handleSubmitSuccess (response) {
  if (response.data.action === 'next_step') {
    this.$store.dispatch('createCheckboxData', this.$v.form.$model)
    return
  }
}

此方法在我的商店中设置复选框数据并将用户路由到下一页（删除了这部分）。所以这一切都很好，似乎运作良好。

所以在第二页时，我有一个按钮可以带你回到第一页。我的想法是，如果发生这种情况，我会使用商店中先前检查的数据来自动检查先前选择的复选框。因此，在第一页我添加了一个计算方法

computed: {
    checkboxData () {
      return this.$store.getters.checkboxData
    }
}

现在如果我将 checkboxData 输出到控制台，它似乎是一个 Observer 对象

[{…}, __ob__: Observer]
  0:
    checkboxData: Array(2)
      0: "1"
      1: "3"
      length: 2

所以上面显示之前，第一个和第二个复选框被选中。

我的问题是我现在如何使用这些数据来自动检查我的复选框。我在网上看到了一些例子，但它们似乎不起作用。

谢谢

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

你使用 Vue 的方式对我来说有点不同，所以你可能需要改变它，但基本上，你可以将你的 v-model 设置为 Vuex 存储中设置的任何数组，它会将这些复选框设置为 true：

new Vue({
  el: "#app",
  data: {
    checkbox: [],
    vuexData: ['1', '3']
  },
  mounted() {
    this.checkbox = this.vuexData;
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model="checkbox" type="checkbox" name="checkbox1" value="1">
  <input v-model="checkbox" type="checkbox" name="checkbox2" value="2">
  <input v-model="checkbox" type="checkbox" name="checkbox3" value="3">
  {{ checkbox }}
</div>

【讨论】：