vue如何监听select的change事件？

Question

现在需求是这样的：

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）

Answer 1

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

jsFiddle

效果

http://imgur.com/a/eRnWF

Answer 2

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

Answer 3

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

Answer 4

像这样可以？

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

Answer 5

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

Answer 6

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

Answer 7

        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 }
        ],

Answer 8

学习了，提好的