Question

191

Vue.js trying to get DOM element by ID in computed returns null

rated 0 times [ 194] [ 3] / answers: 1 / hits: 14868 / 4 Years ago, tue, july 14, 2020, 12:00:00

I am wondering if it is posible to get elements by their id in Vue.js from a computed function. It is a silly question but for some reason it is giving me null as a response when I try to log this condition.

Let's say these are html tags:

<button id="dice1" class="revol"></button>

<button id="dice2" class="revol"></button>

then in one of my computed methods I try to access both ids

computed: {

  roll(){

    document.getElementById("dice1").className += "dic1";

    document.getElementById("dice2").className += "dic2";



    ...some code 

  }

}

Due to the error I checked in the created hook what was going on and realize that the document.getElementById of any id returns null

created() {

  console.log(document.getElementById("dice1"));

  console.log(document.getElementById("dice1"));

},

Also instead of referring straight to the DOM element I initialize variables and assigning the elementsById to them, but the results are the same

rollDice() {

  var  diceFirst= document.getElementById("dice1");

  var diceSecond= document.getElementById("dice2")

  

  diceFirst.className += "dic1";

  diceSecond.className += "dic2";



  ....some code

}

How can I improve this situation? Thanks in advance!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

calicinthias

Add To Favorites

Follow

Total Points: 447

Total Questions: 101

Total Answers: 118

Location: Botswana

Member since Sat, Dec 31, 2022

1 Year ago

calicinthias questions

1 DataGrid blank/not displaying data? Material UI

Sun, Jan 2, 22, 00:00, 2 Years ago

1 How to test for useEffect inside a custom hook?

Wed, Jan 13, 21, 00:00, 3 Years ago

1 Scroll on Dropdown of antD component React

Mon, Aug 10, 20, 00:00, 4 Years ago

1 Adding a key-value pair to an object inside loop using React useState hook

Fri, Jun 26, 20, 00:00, 4 Years ago

1 Mapping Over an Array onClick Button in React

Fri, May 15, 20, 00:00, 4 Years ago

View All

answered 4 Years ago dominickmackenziet · Accepted Answer

Stemming from Decade Moon's comment, Vue doesn't like it when you manually manipulate the DOM (well, actually, Vue doesn't care, but it's bad practice since detaches your data from its representation in the DOM, which is not what you want when making a datadriven app). Instead, whenever you want to set the class of an element, do it with data (or with a computed property).

Your DOM should be representing your data, not the other way around.

new Vue({

  el: '#app',

  data: {

    class1: 'revol',

    class2: 'revol'

  },

  methods: {

    rollDice: function() {

      class1 += 'dic1';

      class2 += 'dic2';

      

      // ... some code

    }

  }

});

<div id="app">

  <button id="dice1" v-bind:class="class1">Dice 1</button>

  <button id="dice2" v-bind:class="class2">Dice 2</button>

</div>

This rollDice function does exactly the same thing as yours—it adds a new class to the buttons—but with a data-driven approach instead of trying to manipulate the DOM. In this case, the two buttons represent the data in class1 and class2, instead of having them decoupled.