Vue.js 尝试通过计算中的 ID 获取 DOM 元素返回 null

Question

我想知道是否可以从计算函数中通过 Vue.js 中的 id 获取元素。这是一个愚蠢的问题，但由于某种原因，当我尝试记录此条件时，它给了我 null 作为响应。

假设这些是 html 标签：

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

然后在我的一种计算方法中，我尝试访问两个 ID

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

    ...some code 
  }
}

由于错误，我检查了创建的钩子发生了什么，并意识到document.getElementById任何 id 的返回 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

源于 Decade Moon 的评论，Vue 不喜欢手动操作 DOM（实际上，Vue 并不关心，但这是不好的做法，因为将数据与其在 DOM 中的表示分离，这不是您想要的当制作数据驱动的应用程序时）。相反，每当您想要设置元素的类时，请使用数据（或计算属性）进行设置。

\n

您的 DOM 应该代表您的数据，而不是相反。

\n

new Vue({\n  el: '#app',\n  data: {\n    class1: 'revol',\n    class2: 'revol'\n  },\n  methods: {\n    rollDice: function() {\n      class1 += 'dic1';\n      class2 += 'dic2';\n      \n      // ... some code\n    }\n  }\n});\n

\n

<div id="app">\n  <button id="dice1" v-bind:class="class1">Dice 1</button>\n  <button id="dice2" v-bind:class="class2">Dice 2</button>\n</div>\n

\n

这个rollDice函数的作用与你的\xe2\x80\x94完全相同，它向buttons\xe2\x80\x94添加了一个新类，但是使用数据驱动的方法，而不是尝试操作DOM。在这种情况下，两个s 代表和button中的数据，而不是将它们解耦。class1class2

\n