CODEWITHSUNDEEP
javascriptcsseventsvue.js
ytbryan
ytbryan

Reputation: 2694

Changing the attribute of each element in a v-for array

I am attempting to figure things out with Vue way of writing javascript.

Considering this scenario:

at .vue template

 <button  v-on:click="biggerFont()" class="btn btn-s btn-default" type="button" name="button">A</button>

   <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">{{ tweet.content }}</textarea>
      </div>
    </div>

at .vue <script>

export default {
  methods: {
    biggerFont:  function() {

       //can I somehow use this.tweets.style.fontSize to influence all the fontSize? 
       document.getElementsByClassName("each_tweet").style.fontSize = "xx-large"  
    }
 }
}

My question is:

  1. how do I go about changing the font-size of each value of the textarea in tweets? Is there a default Vue way of influencing these fontSize?

I tried and failed using document.getElementsByClassName.style.fontSize and it does not seems to be the Vue way. Thank you!

Upvotes: 2

Views: 98

Answers (2)

Mahmud Adam
Mahmud Adam

Reputation: 3579

I believe the Vue way of doing this is using class and style bindings. For example:

<textarea v-bind:class="{ big: enlarge}">{{item}}</textarea>

https://jsfiddle.net/e064m859/

Upvotes: 1

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48407

document.getElementsByClassName method returns a nodeList so you have to access a DOM element using its index.

export default {
  methods: {
     biggerFont:  function() {
          var tweets=document.getElementsByClassName("each_tweet");
          for(var i=0;i<tweets.length;i++){
              tweets[i].style.fontSize = "xx-large";
          }  
     }
  }
}

Upvotes: 1

Related Questions