Vue JS 和表中的模型绑定

Question

为什么不能像这样在 table 中通过 v-model 绑定模型：

<table class="table">
    <thead>
    <th>Select</th>
    <th>Responder ID</th>
    <th>Heading 2</th>
    </thead>
    <tbody>
        <tr v-for="responder in responders">
            <td v-model="selected" @click="selectResponder(responder)"><span class="glyphicon glyphicon-bullhorn"></span></td>
            <td>@{{ responder.userReference }}</td>
        </tr>
    </tbody>
</table>

我想实现的是，当用户单击 table 行中的字形时，所选元素将绑定到我的 javascript 中的变量。

Answer 1

v-model 用于将变量绑定到任何类型的表单输入，不适用于 <td> 元素。您的@click 方法可以执行您所描述的操作：

//in your Vue instance
...
methods:{
    selectResponder(responder){
        //either...
        responder.selected = true;

        //or maybe...
        this.selected = responder;
    }
}
...

Vue JS 和表中的模型绑定

Vue JS and model binding in tables

javascript

vue.js