vue.js - 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

这篇关于vue.js - vue如何监听select的change事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！