vue.js-如何觀察嵌套對象的屬性並獲取索引？

Question

觀察屬性並獲取嵌套對象索引的最佳方法是什么。 看看我的代碼已經通過在選擇字段@ change =“ operatorChanged（key）”中傳遞方法來手動解決了

但是在我的真實項目中，我使用的是https://vue-multiselect.js.org/而不是普通的select標簽。 在多選組件中，我沒有辦法傳遞方法中的鍵。 它們僅提供@ select =“ method”，但不提供參數。

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

Answer 1

我認為您想要的是@input處理程序，而不是@onChange 。

<div class="flexi-numbers" v-for="(flex, key) in mt.flexi">

  <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" 

    @input="operatorChanged(key)">

    <template slot="tag" slot-scope="props">
      <span>{{ props.option.name }}</span>
      <span @click="props.remove(props.option)">x</span> 
    </template>

  </multiselect>

<!-- other stuff -->

有什么方法可以觀察operator_id值或對象index嗎？

operatorChanged(key) {
  // "key" here should be the index being selected,
  // and of course to get the "operator_id"

  this.mt.flexi[key].operator_id
},