来自动态生成的输入的 vue.js 绑定值答案

【问题标题】：vue.js binding value from dynamically generated input来自动态生成的输入的 vue.js 绑定值
【发布时间】：2019-03-15 14:13:57
【问题描述】：

我有以下用于生成 cmets 的代码（为简单起见已删减）：

<div v-for="(g, gi) in submission.goals" :key="gi">
    <div>
        <p >Goal #{{gi+1}}</p>
        <div>{{g.text}}</div>
    </div>
    <div>
        <p>Comments:</p>
        <div><span class="uk-text-small uk-text-muted"><i>no comments</i></span></div>
        <hr>
        <div>
            <a href="" @click="submitComment(g.id, g.user_id, g.phase, $event)"></a>
            <textarea class="comment-input" placeholder="type your comment here"></textarea>
        </div>
    </div>
</div>

我的方法是这样的：

submitComment(gid,uid,phase,e)
{
    e.preventDefault();
    //var comment -> get the value of the closes textaraea here
    console.log(gid, uid, phase, comment);

    //here I will make the ajax call to the API
}

如您所见，整个内容是在v-for 循环中生成的，根据 API 返回的 submission.goals 数组的大小生成 div。

我的问题是如何从最靠近调用提交函数的锚点的 textarea 输入中获取值。

显然，我无法为每个评论区域设置单独的数据对象，因为我无法控制 submit.goals 数组的大小。如果我在每个输入上使用v-model="comment"，无论用户输入什么，都会自动传播到每个文本区域。

我知道如何使用 jQuery 来处理这个问题，但使用 Vue.js 我仍处于早期学习阶段。

【问题讨论】：

And if I use v-model="comment"。你有没有试过:v-model="comment[${gi}]"这样模型关系是独立的？
@Taplar v- 前缀不是让: 变得多余吗？
可能。我并不完全了解 vue 指令。我在这里要说明的要点是尝试使用索引来区分模型
可能是<textarea v-model="g.comment"？并像submitComment(g, $event) 一样传递整个g，因此在该方法中，您可以从g.comment 获得评论。

标签： javascript vue.js vuejs2

【解决方案1】：

如果将文本区域标记为 ref，则可以有一个 textarea 元素列表。使用 v-for 项目的索引号（在您的情况下为 gi），您可以获取 refs 列表的 [gi] 元素并提交其值。

<a href="" @click="submitComment(g.id, g.user_id, g.phase, $event, gi)"></a>
<textarea ref="comment" class="comment-input" placeholder="type your comment here"></textarea>

submitComment(gid,uid,phase,e, gi)
{
    e.preventDefault();
    var comment = this.$refs.comment[gi].value;
    console.log(gid, uid, phase, comment);

    //here I will make the ajax call to the API
}

【讨论】：

【解决方案2】：

尝试将 submission.goals 更改为计算 submissionGoals 并使用上面的代码创建此计算：

submissionGoals(){
  return this.submission.goals.map(goal => ({...goal, comment: ''}));
}

在 textarea 上使用 v-model="g.comment"。现在将submitComment(g.id, g.user_id, g.phase, $event) 更改为submitComment(g, $event) 就像Alexander Yakushev sayed。

【讨论】：