Below is a simplified version of the code I have for generating comments:
<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>
Here is my method:
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
}
The divs are generated in a loop based on the size of the submission.goals array from the API.
How can I retrieve the value from the closest textarea input to the anchor that triggers the submit function?
I cannot have a separate data object for each comment area because the size of the submission.goals array is not predetermined. Using v-model="comment" on each input would propagate any user input to all textareas.
While I know how to handle this with jQuery, I am still learning how to do it in Vue.js.