J'ai le code ci-dessous pour générer des commentaires (réduit pour des raisons de simplicité):

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

Et ma méthode ressemble à ceci:

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
}

Comme vous pouvez le voir, le tout est généré dans une boucle v-for générant des div en fonction de la taille du tableau submission.goals renvoyé par l'API.

Ma question est de savoir comment puis-je obtenir la valeur de l'entrée textarea la plus proche de l'ancre qui appelle la fonction de soumission.

Évidemment, je ne peux pas avoir un objet de données séparé pour chaque zone de commentaire car je n'ai pas de contrôle sur la taille du tableau de soumission.goals. Et si j'utilise v-model="comment" sur chaque entrée, tout ce que l'utilisateur tape sera automatiquement propagé à chaque zone de texte.

Je sais comment gérer cela avec jQuery, mais avec Vue.js, je suis encore aux premiers stades de l'apprentissage.

0
ps-hyp-pt 15 mars 2019 à 17:13

2 réponses

Meilleure réponse

Si vous marquez la zone de texte comme une référence, vous pourriez avoir une liste d'éléments de zone de texte. Avec le numéro d'index des éléments v-for (gi dans votre cas), vous pouvez obtenir l'élément [gi] de la liste des références et soumettre sa valeur.

<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
}
1
ryeMoss 15 mars 2019 à 14:47

Essayez de changer submission.goals en calculé submissionGoals et créez ce calculé avec le code ci-dessus :

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

Utilisez v-model="g.comment" sur la zone de texte. Remplacez maintenant submitComment(g.id, g.user_id, g.phase, $event) par submitComment(g, $event) comme l'a dit Alexander Yakushev.

0
Felipe Jorge 15 mars 2019 à 14:46