Question

在带有收音机的动态创建的行上松开checked radio。如何将其映射到在其上创建/所属的行。

这是一个演示jsfiddle

根据点击的checked，它不会保持row/index的状态。跳至下一个checked radio行。

Answer 1

您应该在每行唯一的选项上分配一个“名称”。（我想至少是您想要的）

您可以使用v-model（将值绑定到数据模型）创建一个实际存储值的数据模型，然后使用行模型分配可选值。

这样，当您删除一行时，您实际上是在删除与其关联的数据，而不仅仅是“下移” DOM，这可能就是为什么要获得结果的原因。

Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
  el: "#app",
  data: {
  	isSelected: false,
    selected: '',
    option: '',
		rows: [
    {
    	options:[
      	{name:'Option 1',value:'opt1'},
        {name:'Option 2',value:'opt2'},
        {name:'Option 3',value:'opt3'},
        {name:'Option 4',value:'opt4'},
        {name:'Option 5',value:'opt5'}
      ],
      value:''
    }
    ],
  },
  methods: {
  foo(){
  	console.log('row1val',this.rows[0].value);
    console.log('row2val',this.rows[0] ? this.rows[1].value : 'no row');
    console.log('row3val',this.rows[2] ? this.rows[2].value : 'no row');
  },
  addRow() {
      this.rows.push(
        {
          options:[
            {name:'Option 1',value:'opt1'},
            {name:'Option 2',value:'opt2'},
            {name:'Option 3',value:'opt3'},
            {name:'Option 4',value:'opt4'},
            {name:'Option 5',value:'opt5'}
          ],
          value:''
        }
      )
    },
    deleteRow(index) {
      console.log('Deleting index',index);
      this.rows.splice(index,1)
    },
    selectedOption(event, index) {
      this.rows[index].option = event.target.value;
      console.log("this.rows["+index+"].option: "+this.rows[index].option);
    },
    selectedRadio(event, index) {
      isSelected = true;
      console.log("isSelected("+index+"): "+ isSelected);
      if(isSelected){
                    this.isSelected = event.target.value;

            var name = event.target.getAttribute('name');
            var id = event.target.getAttribute('id');
            console.log(name, id);

            this.rows[index].selected = event.target.value;
            console.log("this.users["+index+"].selected: "+this.rows[index].selected);
        
      }
    }
	}
});

body {
  background: #20262E;
  padding: 20px;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

<p>
  Rows: {{ rows.length }} 
  <button @click="addRow">Add Row</button>
  <button @click="foo">Debug</button>
</p>

 <br />
 <form @submit.prevent name="test">
 <template v-for="(row,rowNum) in rows">
   

 <button @click="deleteRow(rowNum)">Delete: &nbsp;{{ rowNum+1 }}&nbsp;</button>
 
 <template v-for="option in row.options">
  <input type="radio" :name="'row-'+rowNum" v-model="row.value" :value="option.value">{{option.name}}
</template>

  <select name="selects" @change="selectedOption($event,rowNum)">

<template v-for="index in 10">

<option :value="'test-'+index">Test {{ index }}</option> 

 
</template>

</select> <br />
 </template>

</form>
</div>

vuejs2-如何将选中的无线电保留在动态创建的行上

1 个答案: