H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue如何监听select的change事件?

现在需求是这样的:

select中有3个option,每个option有各自的编号number、操作人员person,现在需要监听select的change事件,更换option时相应的编号和操作人员会赋值给输入框中,如何实现?

vue的v-model方法pass掉,求其他办法。

更新:
html:

            <tbody>
                <tr  v-for="(value,key) in items" :id="key">
                    <td style="display: none;">{{key+1}}</td>
                    <td>
                        <select class="form-control" v-model="value.medicine" @change="chooseMedicine(value)">
                            <option v-for="opt in drugs">{{ opt.drug }}</option>
                        </select>
                    </td>
                    <td class="tdNum">{{number}}</td>
                    <td><input type="text" name="use" class="form-control" v-model="value.use"/></td>
                    <td><input type="text" name="unit" class="form-control" v-model="value.unit"/></td>
                    <td><input type="text" name="rate" class="form-control" v-model="value.rate"/></td>
                    <td><input type="text" name="amount" class="form-control" v-model="value.amount" @keyup="multiply(value,key)"/></td>
                    <td><input type="text" name="price" class="form-control" disabled="disabled" v-model="value.price"/></td>
                    <td><input type="text" name="money"  class="form-control" disabled="disabled" v-model="value.money"/></td>
                    <td>
                        <select class="form-control" v-model="value.stores">
                            <option v-for="opt in pharmacy">{{ opt.store }}</option>
                        </select>
                    </td>
                    <td @click="deletes(key)"><span class="glyphicon glyphicon-minus"></span></td>
                </tr>
            </tbody>

script:

methods: {
    chooseMedicine:function(rowItem){
        rowItem.unit = '只';
        rowItem.price = 5;
    },
    addTr: function () {
        var trItem = {
            medicine:"",
            number:"",
            size:"",
            use:"",
            unit:"",
            way:"",
            rate:"",
            amount:"",
            price:"",
            money:"",
            stores:"",
            del:""
        };
        this.items.push(trItem);
    },
    deletes: function (key) {
        var totalMoney = 0;
        if(confirm('是否确认删除?')) {
            this.items.splice(key, 1);
            for (var i = 0; i < this.items.length; i++) {
                totalMoney += parseFloat(this.items[i].money);
            }
            this.total = totalMoney.toFixed(2);
        }else{

        }
    },
    multiply: function (item,key) {
        var totalMoney = 0;
        item.money = (parseFloat(item.amount) * parseFloat(item.price)).toFixed(2);
        if(isNaN(item.money)){
            item.money = '0.00';
        }else{
            item.money = item.money;
        }
        for (var i = 0; i < this.items.length; i++) {
            totalMoney += parseFloat(this.items[i].money);
            if(isNaN(totalMoney)) {
                this.total = '';
            }else{
                this.total = totalMoney.toFixed(2);
            }
        }
    }
}

二次更新:三张图分别为默认、选择下拉框内容(console.log能出来值 但函数没赋值给相应的input)、增加一行(函数赋值给相应的input)
图片描述

图片描述

图片描述

回答:

整體代碼太多,就不貼了,裡面有詳細的註解:

jsFiddle

效果

http://imgur.com/a/eRnWF

回答:

可以换个思路,弄个字段v-model绑上去,然后watch它的变化。

回答:

@change=”你的事件名称” 这样不就行了吗

回答:

像这样可以?

<div id="select">
    <input type="text" v-model="selected">
    <select @change="selectVal">
        <option v-for="item in selects" v-model="item.value">{{ item.value }}</option>
    </select>
</div>

<script>
new Vue({
    el: '#select',
    data: {
        selected: 'red',
        selects: [
            {value: 'red'},
            {value: 'green'},
            {value: 'yellow'}
        ]
    },
    methods: {
        selectVal: function(ele) {
            this.selected = ele.target.value;
        }
    }
});
</script>

回答:

你可能想的复杂了,直接用v-model就可以了,你一直说不用v-model,不知道你是试过了还是没试过,如果没试过,建议你还是去试一下

回答:

<select @input="selectVal">
    <option v-for="item in selects" v-model="item.value">{{ item.value }}</option>
</select>

回答:

        items: [],
        drugs: [
            { id: 1, name: '药品A', unit: '支', price: 23.8 },
            { id: 2, name: '药品B', unit: '瓶', price: 14 },
            { id: 3, name: '药品C', unit: '盒', price: 52.5 }
        ],

回答:

学习了,提好的

本文地址:H5W3 » vue如何监听select的change事件?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址