javascript - vue.js - 如何监视嵌套对象的属性并获取索引？

Question

观察属性并获取嵌套对象索引的最佳方法是什么。 看看我的代码已经通过在选择字段 @change="operatorChanged(key)"中传递方法来手动解决它

但在我的实际项目中，我使用 https://vue-multiselect.js.org/而不是普通的选择标签。在多选组件中，我无法在方法中传递 key 。他们只提供@select="method"，但不允许参数。

JSFiddle link

这是我的 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 -->

Is the any way to watch operator_id value or object 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
},