Getelementsbyclassname In Context Of Vue

In the context of vue.js, how does getElementsByClassName work? I have the following snippet of code below - the goal is to click a button and change the color of the h1 tag to gre

Solution 1:

You are correct. In Vue, interacting directly with the DOM is counter-intuitive.

Fortunately, there is a directive that allows you to apply style changes directly by binding to a data property. (Keep in mind, you could do something similar with a class as well).

<h1class="main-header"v-bind:style="{ color: activeColor}">{{ message }}</h1><buttonv-on:click="colorChange">Click me</button>

In your component, create a data property and update it on button click:

data: {
    message: 'Hello Vue!',
    activeColor: 'red'
},
methods: {
    colorChange: function() {
        this.activeColor = 'green'
    }
}