vue.js - 如何查看嵌套对象的属性并获取索引? [英] vue.js - how to watch property of nested object and get index?

问题描述

查看属性并获取嵌套对象索引的最佳方法是什么.看看我的代码已经通过在选择字段@change="operatorChanged(key)"

中传递方法来手动解决它

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

JSFiddle 链接

这是我的模板 HTML.

<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><!-- 这是我创建的--><select v-model="flex.operator_id" @change="operatorChanged(key)"><option value="">Operator</option><option v-for="operator in operatorList" :value="operator">{{ operator.name }}</选项></选择><!-- 这是多选字段--><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></模板></多选><select v-model="flex.type"><option v-if="!flex.operator_id" value="">Type</option><模板 v-if="flex.operator_id"><模板 v-if="flex.operator_id.type == 'flexiload'"><option value="prepaid">预付</option><option value="postpaid">Postpaid</option></模板><模板 v-else-if="flex.operator_id.type == 'mobile-banking'"><option value="personal">个人</option><option value="agent">Agent</option></模板></模板></选择><input type="number" autocomplete="off" placeholder="Amount" v-on:keyup="amountChange(key)" id="amount" v-model="flex.amount" required ></div><!--/.flexi-numbers -->
<!--/.flexi-number-list --><input type="password" placeholder="Pin" id="pin" v-model="mt.pin" required></div>

这是我的 vue js 代码.

出口默认{数据:函数(){返回 {山:{灵活:[{ number: '', operator_id: '', type: '', amount: '' },{ number: '', operator_id: '', type: '', amount: '' },],别针: ''，},运算符列表:[{ 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' },],}},手表: {//有什么方法可以像下面一样观察 operator_id 值或对象索引吗?/*'mt.flexi.operator_id':函数(索引，值){}*/},方法: {numberChange(键){/* 这里我可以得到号码 *///this.mt.flexi[key].number;},金额变化(键){警报(键)；/* 这里我可以得到金额 *///this.mt.flexi[key].amount;},运算符更改(键){警报(键)；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 = '个人';}}//this.amountChange(key);},}//方法 }//导出默认值

解决方案

我认为你想要的是 @input handler 而不是 @onChange.

<多选:允许空=假"取消选择标签=""选择标签=""v-model="flex.operator_id":options="operatorList":保留搜索=真"占位符=运算符"标签=名称"跟踪= =名称":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></模板></多选><!-- 其他东西-->

<块引用>

有没有办法观察operator_id值或对象index?

operatorChanged(key) {//这里的key"应该是被选择的索引，//当然还有operator_id"this.mt.flexi[key].operator_id},

What is the best way to watch the property and get an index of nested object. Look at my code already solve it manually by passing method in select field @change="operatorChanged(key)"

But in my real project, I'm using https://vue-multiselect.js.org/ instead of normal select tag. In multiselect component I didn't get way to pass key in method. They only provide @select="method" but not allow parameter.

JSFiddle link

Here is my template 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>

and here is my vue js code.

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

解决方案

I think what you want is @input handler instead of @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
},

这篇关于vue.js - 如何查看嵌套对象的属性并获取索引?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！