javascript - 最近在用Vue.js 请问怎么实现列表每个元素都有的一个回复表单

Question

有这么一个列表页：

对应的VM是这样的：

    var listModel = new Vue({
        el: '#listPage',
        data: {
            list: []
        },
        methods: {
            // 加载数据
            more: function() {
                var that = this;
                APP.ajax('post/list', {}, function(ret){
                    if (!that.list.length) {
                        that.list = ret.data;
                        return;
                    }
                    // ...
                }, true);
            },
            // 回复
            reply: function() {

            }
        }
    });
    // 第一次自动加载
    listModel.more();

那么问题来了，我该怎么实现每一个帖子下面都有的那个回复输入框？

如果给listModel加个属性比如replyContent
然后把每个回复输入框都绑定到这个属性，
那用户在其中一个回复框输入内容，
所有的回复框内容都会跟着变。。。

Answer 1

我自己解决了，
因为是个无限列表，并没有用Vue.js的组件功能，怕影响性能，
最后我用了点 Zepto 的方法搞定的。
部分代码如下：

<p class="ui-input-wrap">
    <p class="ui-input ui-border-radius">
        <input type="text" placeholder="我也说一句...">
    </p>
    <button class="ui-btn" @tap="reply($event, item.id, $index)">回复</button>
</p>

reply: function(eve, pid, idx) {
    var that = this;
    var iptEle = $(eve.target).parent().find('input');
    var reMsg = iptEle.val().trim();

    APP.ajax('post/reply', {
        post_id: pid,
        content: reMsg
    }, function() {
        that.list[idx].reply_new.push({
            _user: APP.user,
            msg: reMsg
        })
        iptEle.val('');
    }, true);
}

Answer 2

两种方案

1. 回复信息做成数组，实现双向绑定

2. 回复信息不进行数据绑定，在提交时实现获取回复内容的业务逻辑

Answer 3

最近一直在做回复这个功能，求给思路。要用到什么框架，万分感谢