Vue JS-使用单选按钮更新对象数组中的相同属性

Question

我有这种情况

参与者组将能够选择不同的治疗方法，或者小组组长将能够为特定用户选择特定治疗方法。像这样

在这种情况下，当我在屏幕上选择“ 对所有人相同”单选按钮时，我只会得到一组单选按钮。例如，当我选择“选项一”时，我想使用该选项中的值为所有人更新“ selectedOption ”。

如果我选择“ 每个参与者都不同”，它将呈现与用户一样多的单选按钮组，在这种情况下，它将起作用。对于每个人，我都能获得不同的选择。

有人可以帮助我实现“全民同情”的情况吗？谢谢

以下是代码和框示例https://codesandbox.io/s/myl7j2jpp9?fontsize=14

---

<template>
      <div>
        <div v-if="persons.length > 1">
          <div class="custom-control custom-radio">
            <input
              type="radio"
              id="same"
              name="customRadio"
              class="custom-control-input"
              v-model="condition"
              value="same"
            >
            <label class="custom-control-label" for="same">Same for all</label>
          </div>
          <div class="custom-control custom-radio">
            <input
              type="radio"
              id="different"
              name="customRadio"
              class="custom-control-input"
              v-model="condition"
              value="different"
            >
            <label class="custom-control-label" for="different">Every participant different</label>
          </div>
        </div>

        <div v-for="(person, index) in filteredPersons" :key="index" class="container">
          <div class="row">
            <div class="col-sm-8">
              <div class="card options">
                <div class="card-body">
                  <div class="custom-control custom-radio">
                    <input
                      type="radio"
                      :id="'customRadio0' + index"
                      :name="'customRadio2' + index"
                      class="custom-control-input"
                      v-model="person.selectedOption"
                      :value="'Option 1'"
                    >
                    <label class="custom-control-label" :for="'customRadio0' + index">Option one</label>
                  </div>
                  <div class="custom-control custom-radio">
                    <input
                      type="radio"
                      :id="'customRadio1' + index"
                      :name="'customRadio2' + index"
                      class="custom-control-input"
                      v-model="person.selectedOption"
                      :value="'Option 2'"
                    >
                    <label class="custom-control-label" :for="'customRadio1' + index">Option 2</label>
                  </div>
                  <div class="custom-control custom-radio">
                    <input
                      type="radio"
                      :id="'customRadio2' + index"
                      :name="'customRadio2' + index"
                      class="custom-control-input"
                      v-model="person.selectedOption"
                      :value="'Option 3'"
                    >
                    <label class="custom-control-label" :for="'customRadio2' + index">Option 3</label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>


    <script>
        export default {
          data: function() {
            return {
              condition: "same",
              persons: [
                { name: "Denver", surname: "Lawson", selectedOption: "" },
                { name: "Kenneth", surname: "Ivie", selectedOption: "" }
              ]
            };
          },
          computed: {
            filteredPersons: function() {
              if (this.condition === "same") {
                return this.persons.slice(0, 1);
              } else {
                return this.persons;
              }
            }
          },
          methods: {}
        };
        </script>