Установка значения true для сгенерированных переключателей v-for

Question

Строки таблицы генерируются с использованием цикла v-for над массивом объектов в graphicState. Я пытаюсь создать столбец переключателей. Когда переключатель установлен, для graphicState[index].selected следует установить true.

Этот пост интересен, но как его использовать, установите 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 использовать значение этого конкретного входа в качестве группы value ...

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

Все радиовходы имеют одинаковое значение, поэтому получатель данных формы не сможет определить, какой вход выбран.Чтобы решить эту проблему, присвойте уникальное значение каждому входу на основе элемента итератора.Например, вы можете использовать идентификатор:

<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)
    },
  }
})

  
    
      
        
          
            
              
              Show
              Select
              Shape
            
          
          
            
              
              
                
              
              
                
              
              
                {{ form.shape }}
              
            
          
        
        
        {{graphicState}}

Подтвердить