将 v-for 生成的单选按钮的值设置为 true

Question

表的行是使用v-for 循环在graphicState 中的对象数组上生成的。我正在尝试创建一列单选按钮。选中单选按钮时，应将graphicState[index].selected 设置为true。

这个post 很有趣，但是我如何使用将graphicState[index].selected 设置为true？

<form>
  <div class="row">
    <div class="col-md-12 " align="center">
      <table class="table-striped" v-on:mouseleave="mouseleave()">
        <thead>
          <tr>
            <th></th>
            <th>Show</th>
            <th>Select</th>
            <th>Shape</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(form, index) in graphicState" :key="index">
            <td @click="removeDate(index)"><i class="far fa-trash-alt"></i></td>
            <td>
              <input type="checkbox" v-model="form.show">
            </td>
            <td>
              <input type="radio" name="grp" id="grp" value="true" v-model="form.selected">
            </td>
            <td v-on:click="toggleShape(index)">
              {{ form.shape }}
            </td>
          </tr>
        </tbody>
      </table>
      <div v-for="(form, index) in graphicState " :key="index">
      </div>
    </div>
  </div>
</form>

Answer 1

您可以使用@change 事件处理程序：

<input type="radio" name="grp" id="grp" value="true" v-model="form.selected" @change="onChange($event, index)">

然后在方法中处理：

methods: {
  onChange (event, index) {
    this.graphicState[index].selected = event.target.value
    this.graphicState = JSON.parse(JSON.stringify(this.graphicState))
  }
}

Answer 2

您已经拥有的代码应该将无线电输入的graphicState[index].selected 设置为true，但是输入值（以及因此graphicState[index].selected 到v-model）永远不会设置为false，这是一个问题如果允许用户改变主意以选择不同的输入。发生这种情况是因为无线电输入的 change-event 仅在其 checked 属性设置为真值（在选择时）时才会触发。

一种解决方案是添加一个change-event 处理程序，用于清除未选择输入的.selected 值。

// template
<tr v-for="(form, index) in graphicState">
  <input @change="onRadioChange(index)" ...>
</tr>

// script
onRadioChange(selectedIndex) {
  this.graphicState
    .filter((x,i) => i !== selectedIndex) // get non-selected inputs
    .forEach(x => x.selected = false)
}

但是如果你使用HTMLFormElement的原生提交，还有另一个问题。在下面的模板中，当v-model 的值为true 时，Vue 将无线电输入的checked 属性设置为true，这告诉HTMLFormElement 使用这个特定输入的值作为组@98​​7654338@.. .

<input type="radio"
       name="grp"
       v-model="form.selected"
       value="true">

所有单选输入具有相同的值，因此表单数据的接收者将无法判断选择了哪个输入。要解决此问题，请根据迭代器项为每个输入分配一个唯一值。例如，您可以使用 ID：

<input type="radio"
       name="grp"
       v-model="form.selected"
       value="form.id">

new Vue({
  el: '#app',
  data() {
    return {
      graphicState: [
        {id: 'A', selected: false, show: false},
        {id: 'B', selected: false, show: false},
        {id: 'C', selected: false, show: false},
      ]
    }
  },
  methods: {
    mouseleave() {},
    removeDate() {},
    toggleShape() {},
    onRadioChange(selectedIndex) {
      this.graphicState
        .filter((x,i) => i !== selectedIndex)
        .forEach(x => x.selected = false)
    },
  }
})

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>

<div id="app">
  <form method="post" action="//httpbin.org/post">
    <div class="row">
      <div class="col-md-12" align="center">
        <table class="table-striped" v-on:mouseleave="mouseleave()">
          <thead>
            <tr>
              <th></th>
              <th>Show</th>
              <th>Select</th>
              <th>Shape</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(form, index) in graphicState" :key="form.id">
              <td @click="removeDate(index)"><i class="far fa-trash-alt"></i></td>
              <td>
                <input type="checkbox" v-model="form.show">
              </td>
              <td>
                <input type="radio" name="grp" :value="form.id" v-model="form.selected" @change="onRadioChange(index)">
              </td>
              <td v-on:click="toggleShape(index)">
                {{ form.shape }}
              </td>
            </tr>
          </tbody>
        </table>
        
        <pre>{{graphicState}}</pre>
      </div>
    </div>
    <button>Submit</button>
  </form>
</div>