什么是观赏性，让嵌套对象的索引的最佳方式。 看看我的代码已经被传递方法的选择字段手动解决它@变化=“operatorChanged（键）”
但在我的实际项目中，我使用https://vue-multiselect.js.org/ ，而不是正常的选择标记。 在多项选择组件，我没有得到的方式来传递密钥的方法。 他们只提供@选择=“方法”，但不允许参数。
的jsfiddle链接
这是我的HTML模板。
<div class="flexi-area">
<div class="flexi-number-list">
<div class="flexi-numbers" v-for="(flex, key) in mt.flexi">
<input type="number" placeholder="Number" autocomplete="off" id="number" v-model="flex.number" v-on:keyup="numberChange(key)" required>
<!-- this is created by me-->
<select v-model="flex.operator_id" @change="operatorChanged(key)">
<option value="">Operator</option>
<option v-for="operator in operatorList" :value="operator">
{{ operator.name }}
</option>
</select>
<!-- this is multiselect field -->
<multiselect :allow-empty="false" deselect-label="" select-label="" v-model="flex.operator_id" :options="operatorList" :preserve-search="true" placeholder="Operator" label="name" track-by="name" :preselect-first="false" @onChange="operatorChanged(key)">
<template slot="tag" slot-scope="props">
<span>{{ props.option.name }}</span>
<span @click="props.remove(props.option)">x</span>
</template>
</multiselect>
<select v-model="flex.type">
<option v-if="!flex.operator_id" value="">Type</option>
<template v-if="flex.operator_id">
<template v-if="flex.operator_id.type == 'flexiload'">
<option value="prepaid">Prepaid</option>
<option value="postpaid">Postpaid</option>
</template>
<template v-else-if="flex.operator_id.type == 'mobile-banking'">
<option value="personal">Personal</option>
<option value="agent">Agent</option>
</template>
</template>
</select>
<input type="number" autocomplete="off" placeholder="Amount" v-on:keyup="amountChange(key)" id="amount" v-model="flex.amount" required >
</div><!-- /.flexi-numbers -->
</div> <!-- /.flexi-number-list -->
<input type="password" placeholder="Pin" id="pin" v-model="mt.pin" required></div>
这里是我的VUE js代码。
export default {
data: function () {
return {
mt: {
flexi: [
{ number: '', operator_id: '', type: '', amount: '' },
{ number: '', operator_id: '', type: '', amount: '' },
],
pin: '',
},
operatorList: [
{ id: 1, name: 'Grameenphone', type: 'flexiload' },
{ id: 2, name: 'Banglalink', type: 'flexiload' },
{ id: 3, name: 'Bkash', type: 'mobile-banking' },
{ id: 4, name: 'Rocket', type: 'mobile-banking' },
],
}
},
watch: {
// is any way to watch operator_id value or object index like follwing?
/*
'mt.flexi.operator_id': function (index, value) {
}
*/
},
methods: {
numberChange(key) {
/* Here I can get the number */
//this.mt.flexi[key].number;
},
amountChange(key) {
alert(key);
/* Here I can get the amount */
//this.mt.flexi[key].amount;
},
operatorChanged( key ) {
alert(key);
if ( this.mt.flexi[key].operator_id ) {
if ( this.mt.flexi[key].operator_id.type == 'flexiload' ) {
this.mt.flexi[key].type = 'prepaid';
} else if ( this.mt.flexi[key].operator_id.type == 'mobile-banking' ) {
this.mt.flexi[key].type = 'personal';
}
}
//this.amountChange(key);
},
} //methods } //export default
