Question

我有以下用于生成注释的代码（为简单起见，将其删除）：

<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 输入中获取值。

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

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

Answer 1

如果将文本区域标记为参考，则可能会有一个textarea元素列表。使用v-for项目的索引号（在您的情况下为gi），您可以获取引用列表的[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
}

Answer 2

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

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

在文本区域上使用v-model="g.comment"。现在像Alexander Yakushev说的那样将submitComment(g.id, g.user_id, g.phase, $event)更改为submitComment(g, $event)。

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

2 个答案: