Vue. js попытка получить элемент DOM по идентификатору в вычисленном возвращает null

Question

Мне интересно, можно ли получить элементы по их идентификатору в Vue. js из вычисляемой функции. Это глупый вопрос, но по какой-то причине он дает мне ноль в качестве ответа, когда я пытаюсь зарегистрировать это условие.

Допустим, это html теги:

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

тогда в одном из моих вычисленных методов я пытаюсь получить доступ к обоим идентификаторам

computed: {
  roll(){
    document.getElementById("dice1").className += "dic1";
    document.getElementById("dice2").className += "dic2";

    ...some code 
  }
}

Из-за ошибки, которую я проверил в созданном хуке, что происходит, и понимаю, что document.getElementById любого идентификатора возвращает null

created() {
  console.log(document.getElementById("dice1"));
  console.log(document.getElementById("dice1"));
},

Также вместо того, чтобы ссылаться прямо на элемент DOM, я инициализирую переменные и присваиваю им elementsById, но результаты те же самые

rollDice() {
  var  diceFirst= document.getElementById("dice1");
  var diceSecond= document.getElementById("dice2")
  
  diceFirst.className += "dic1";
  diceSecond.className += "dic2";

  ....some code
}

Как я могу улучшить эту ситуацию? Заранее спасибо!

Answer 1

Элементы в DOM доступны только в хуке mounted. В created элементы DOM еще не отрисованы, поэтому вы не можете их получить.

Вы также можете использовать $ref для получения элемента из DOM.

  <input type="text" ref="textbox" />

В скрипте вы можете получить доступ к этому элементу, используя

  let tBox = this.$ref.textbox;

tBox будет содержать входной элемент DOM.

В приведенном ниже фрагменте вы можете увидеть, как получить элемент по идентификатору .

new Vue({
  el: "#app",
  mounted() {
    document.getElementById('header').textContent = 'New Text'
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>

<div id="app">
  <h1 id="header">Component Text</h1>
</div>

Answer 2

Исходя из комментария Decade Moon, Vue не нравится, когда вы вручную манипулируете DOM (ну, на самом деле, Vue все равно, но это плохая практика, так как ваши данные отделяются от их представления в DOM , чего вы не хотите при создании приложения, управляемого данными). Вместо этого, когда вы хотите установить класс элемента, делайте это с данными (или с вычисляемым свойством).

Ваша DOM должна представлять ваши данные, а не наоборот.

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>

Эта функция rollDice делает то же самое, что и ваша - она ​​добавляет новый класс к кнопкам - но с подходом, управляемым данными, вместо того, чтобы пытаться манипулировать DOM. В этом случае два button представляют данные в class1 и class2, вместо того, чтобы разделять их.