CODEWITHSUNDEEP
javascriptvue.jsv-for
ytbryan
ytbryan

Reputation: 2694

Retrieving the value of textarea in a v-for array

Considering this scenario

At .vue template

<div v-for="(tweet, index) in tweets">
  <div class="each_tweet">
    <textarea v-on:keyup="typing(index)"
              placeholder="What's happening now">{{ tweet.content }}</textarea>
  </div>
</div>

At .vue <script> 

export default {
  methods: {
   typing: function(index) {
    console.log(this.tweets[index])//How to get the value of textarea 
   }
 }, 
   data: function () {
    return {
      tweets: [{id: 0, content: ""},
               {id: 1, content: ""}]
    }
  }

}

My question is:

1) Is there a way to sync the value of the textarea with each tweet object's content? The value refers to the innerText of the textarea.

2) Is there a way to get the value of the textarea at the method "typing"?

Upvotes: 1

Views: 2487

Answers (1)

CD..
CD..

Reputation: 74176

You can use v-model:

You can use the v-model directive to create two-way data bindings on form input and textarea elements.

For example:

<div v-for="(tweet, index) in tweets">
  <div class="each_tweet">
    <textarea v-on:keyup="typing(index)"
              v-model="tweet.content"
              placeholder="What's happening now"></textarea>
  </div>
</div>

Upvotes: 1

Related Questions