Vue.js 如何使用vuex链接多次显示同一组件

我是Vue和Vuex的新手。 我用单选按钮制作了一个组件，这个组件是与存储的双向绑定

现在该组件正在工作，我想通过多次调用它来将其用于多个项目，并向它指示应该绑定到vuex存储区的哪个项目。通过这种方式，我将能够循环包含应用单选按钮修改的所有项的数组

在我的商店中，我有以下阵列：

state { 
    [...other data...]
    arrayX { 
       item1: { name : 'a', value : 'nok'}
       item2: { name : 'b', value : 'ok}},
    [...other data...]

此阵列与组件内部的v-model绑定：

<template>
    <div class="radio">
            <input type="radio" name="a" value="nok" v-model="arrayX.item1.value" id="nok"/>
            <label for="nok"> Nok </label>
          </div>
          <div class="radio">
            <input type="radio" name="a" value=""  v-model="arrayX.item1.value" id="empty"/>
            <label for="empty">None</label>
          </div>
          <div class="radio">
            <input type="radio" name="a" value="ok_but" v-model="arrayX.item1.value" id="ok_but"/>
            <label for="ok_but">Ok but</label>
          </div>
          <div class="radio">
            <input type="radio" name="a" value="ok" v-model="arrayX.item1.value" id="ok"/>
            <label for="ok">Ok</label>
          </div>
        </div>   

    </template>


<script>
import { mapFields } from 'vuex-map-fields';
  export default {
    name: 'SwitchColors',
    computed:{
      ...mapFields(['arrayX' ])
    }
  }
</script>

诺克
没有一个
好的，但是
好啊
从“vuex映射字段”导入{mapFields}；
导出默认值{
名称：'SwitchColors'，
计算：{
…映射字段（['arrayX']）
}
}

我在Vue 2 CLI沙盒应用程序中创建了一个示例场景。每个单选按钮组件都通过计算属性绑定到Vuex存储阵列元素。我将存储数组索引值作为道具从父级传递给无线电组件

RadioButtonVuex.vue

<template>
  <div class="radio-button-vuex">
    <hr>
    <div class="row">
      <div class="col-md-6">
        <input type="radio" value="One" v-model="picked">
        <label>One</label>
        <br>
        <input type="radio" value="Two" v-model="picked">
        <label>Two</label>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      pickedIndex: {
        type: Number,
        required: true
      }
    },
    computed: {
      picked: {
        get() {
          return this.$store.state.radioSelections[this.pickedIndex].picked;
        },
        set(newValue) {
          this.$store.commit('updateSelection', { index: this.pickedIndex, newValue: newValue });
        }
      }
    },
  }
</script>

<style scoped>
  label {
    margin-left: 0.5rem;
  }
</style>

---

谢谢有没有一种方法可以使用点击标签来检查按钮，这样我就可以取消点击按钮了。我试着用另一个道具“id”，但它弄糟了第二组按钮检查第一组按钮…欢迎。在我的示例中，我删除了输入ID，因为在同一HTML页面上有重复的ID会导致问题。您可以尝试在运行时动态创建ID，可能会连接索引属性值。但是如果你不想单选按钮显示，那么单选按钮可能不是你想要的。可能研究一个替代方案。

<template>
  <div class="parent">
    <h3>Parent.vue</h3>
    <radio-button-vuex :pickedIndex="0" />
    <radio-button-vuex :pickedIndex="1" />
  </div>
</template>

<script>
  import RadioButtonVuex from './RadioButtonVuex.vue'

  export default {
    components: {
      RadioButtonVuex
    }
  }
</script>

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    radioSelections: [
      {
        picked: 'One'
      },
      {
        picked: 'Two'
      }
    ]
  },
  mutations: {
    updateSelection(state, payload) {
      state.radioSelections[payload.index].picked = payload.newValue;
    }
  }
})