vue.js binding value from dynamically generated input

Question

I have the below code for generating comments (cutted down for simplicity sake):

<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>

and my method look like this:

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
}

As you can see the whole thing is generated in a v-for loop generating divs according to the size of the submission.goals array returned by the API.

My question is how can I get the value from the textarea input closest to the anchor that is calling the submit function.

Obviously I can't have a separate data object for each comment area since I do not have a control over the size of submission.goals array. And if I use v-model="comment" on each input, whatever user types in will be automatically propagated to each and every textarea.

I know how to handle this with jQuery, but with Vue.js I am still in the early learning stages.

And if I use v-model="comment". Have you tried :v-model="comment[${gi}]" so the model relations are independent? — Taplar
– Taplar, Commented Mar 15, 2019 at 14:17
Possibly. I'm not completely up on the vue directives. The main point i'm trying to make here is to try to use the indexing to differentiate the models — Taplar
– Taplar, Commented Mar 15, 2019 at 14:22
Maybe <textarea v-model="g.comment"? And pass whole g like submitComment(g, $event), so inside that method you can get comment from g.comment. — Alex
– Alex, Commented Mar 15, 2019 at 14:23

ryeMoss · Accepted Answer · 2019-03-15 14:47:00Z

1

If you mark the text area as a ref, you could have a list of textarea elements. With the index number of the v-for items (gi in your case), you can get the [gi] element of the refs list and submit its value.

<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
}

answered Mar 15, 2019 at 14:47

ryeMoss

4,3631 gold badge19 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Felipe Jorge · Accepted Answer · 2019-03-15 14:46:53Z

0

Try change submission.goals to computed submissionGoals and create this computed with the code above:

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

Use v-model="g.comment" on textarea. Now change submitComment(g.id, g.user_id, g.phase, $event) to submitComment(g, $event) like Alexander Yakushev sayed.

answered Mar 15, 2019 at 14:46

Felipe Jorge

11 bronze badge

Collectives™ on Stack Overflow

vue.js binding value from dynamically generated input

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related