vue.js一个双项绑定的问题

问题描述

问 题

<ul class="list-unstyled">
      <li v-for="item in items" class="pull-left">
          {{item.name}}
      </li>
</ul>
<input v-model='item.name'>

如上 我通过数据循环产生一个列表，下面有一个输入框，我想选中某一列的时候在输入框输入内容可以改变此时选中li内的内容，不知道能否使用双项绑定，求大神指点一下。

解决方案

不知道这样能不能满足你的实际需求， 默认选择第一个，然后给每一个li绑定一个点击事件或者事件委托给ul，这个可以继续优化。点击后获取到该元素的id，id是赋值的index键，这个是对你的template做了一下修改。

---

<div id="app">
    <ul class="list-unstyled">
        <li v-for="(item, index) in items" :id="index" class="pull-left" @click="check">
            {{item.name}}
        </li>
    </ul>
    <input v-model='items[key].name'>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            items: [{
                name: 'a'
            }, {
                name: 'b'
            }],
            key: 0
        },
        methods: {
            check: function(e) {
                this.key = e.target.id;
            }
        }
    })
</script>

https://jsfiddle.net/b6sjwpb5/

这篇关于vue.js一个双项绑定的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！