Значение привязки vue.js из динамически сгенерированного ввода

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, генерирующем div в соответствии с размером массива submission.goals , возвращаемого API.

У меня вопрос, как я могу получить значение из textarea , ближайшего к якору, который вызывает функцию отправки.

Очевидно, что я не могу иметь отдельный объект данных для каждой области комментариев, так как у меня нет контроля над размером массива submission.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" для текстовой области. Теперь измените submitComment(g.id, g.user_id, g.phase, $event) на submitComment(g, $event) как Александр Якушев sayed.