Altering the properties of every item within a v-for loop's array

Question

Altering the properties of every item within a v-for loop's array

I'm currently exploring Vue's approach to writing JavaScript.

Let's consider this situation:

In the .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>

In the .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 inquiry is:

How can I adjust the font size of each value in the textarea within tweets? Is there a standard Vue method for controlling these font sizes?

I attempted unsuccessfully with

document.getElementsByClassName.style.fontSize

, and it doesn't appear to align with the Vue methodology. Thank you!

javascript css events vue.js

Answer 1

Answer №1

In my opinion, the preferred method in Vue for achieving this is by utilizing class and style bindings. For instance:

<div v-bind:class="{ bold: emphasize}">{{content}}</div>

https://jsfiddle.net/a891b243/

Answer 2

In my opinion, the preferred method in Vue for achieving this is by utilizing class and style bindings. For instance:

<div v-bind:class="{ bold: emphasize}">{{content}}</div>

https://jsfiddle.net/a891b243/

Answer 3

Answer №2

When using the <code>document.getElementsByClassName

method, it will return a nodeList. To access a specific element within the DOM, you must use its index.

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

Answer 4

When using the <code>document.getElementsByClassName

method, it will return a nodeList. To access a specific element within the DOM, you must use its index.

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

Altering the properties of every item within a v-for loop's array

Answer №1

Answer №2

Similar questions

Adding an element to the second-to-last position in a list

Tips for extracting key values from an array of objects in Typescript

While working on creating a game prototype using CSS and Javascript, I encountered an issue where the icons were losing their color when trying to print the document

The post body is incomplete and is lacking the necessary parameter "To" that

Tips for receiving notifications when the Collapsible collapses

Input for uncomplicated changing identifier

Using Accordions in Jquery to dynamically adjust page height during ajax calls

Creating recursive functions to produce a unique variable without any repetitions

Having trouble retrieving JSON data using ajax

What is the method for obtaining the div ID's from this form?

Cross-Origin Resource Sharing problem encountered with the webservice thumbnail.ws

VueJS: Preloading data prior to and following component initialization

Using Vue JS to set a default value in a custom radio group

Semantic UI Troubles: Unraveling the Sidebars and #pusher Defects

The function getElementbyId is not recognized

What are the steps to utilize vue.js for dynamically adjusting my sidebar based on a URL input?

What is the best way to target the first child element in this scenario?

Sending Javascript Variable through Form

What is the best way to assign a value to the param tag of an applet using JavaScript variables

Changing the li tag by clicking on it is a simple task that can be easily