功能只有在 Vue 中编辑和刷新后才能工作？

Question

我在 Vue 中的功能似乎只有在故意引发错误然后刷新页面后才起作用。该代码工作正常，只是初始化不起作用。 有人可以帮忙吗？

简要说明：

当用户点击按钮时，会调用名为 provjeriOdgovore 的函数。 该函数查找类名 answer 的所有元素（输入字段），然后进行迭代，检查输入值是否包含在变量 odgovori 内。如果是，程序会将 green-color 类附加到 answer 的 classList 中，如果不是，则会发生相同的情况，但不是 green- color，它是 red-color

有问题的代码：

HTML 部分：

<input class="answer" type="text">
<input class="answer" type="text">
<input class="answer" type="text">

<button :onclick="provjeriOdgovore()">Provjeri</button>

Javascript 部分：

const odgovori = [[long array of strings], [long array of strings], [long array of strings]]

export default {
  data() {
    return {
        provjeriOdgovore: () => {
          let questionDiv = document.getElementsByClassName("answer")
          for (let i = 0; i < questionDiv.length; i++) {
              let userInput = questionDiv[i].value.toLowerCase();
              questionDiv[i].classList.add("color-white")
              if (odgovori[i].includes(userInput)) {
                  console.log("tocno", questionDiv[i])
                  questionDiv[i].classList.add("green-color");
                  if (questionDiv[i].classList.length > 2) {
                      questionDiv[i].classList.remove("red-color");
                  }
              } else {
                  console.log("netocno" ,questionDiv[i])
                  questionDiv[i].classList.add("red-color");
                  if (questionDiv[i].classList.length > 2) {
                      questionDiv[i].classList.remove("green-color");
                  }
              } 
          }
      }
    }
  }
}

Answer 1

您需要放入您的方法，

methods: {
    provjeriOdgovore() {
        let questionDiv = document.getElementsByClassName("answer");
        for (let i = 0; i < questionDiv.length; i++) {
            let userInput = questionDiv[i].value.toLowerCase();
            questionDiv[i].classList.add("color-white");
            if (odgovori[i].includes(userInput)) {
                console.log("tocno", questionDiv[i]);
                questionDiv[i].classList.add("green-color");
                if (questionDiv[i].classList.length > 2) {
                    questionDiv[i].classList.remove("red-color");
                }
            } else {
                console.log("netocno", questionDiv[i]);
                questionDiv[i].classList.add("red-color");
                if (questionDiv[i].classList.length > 2) {
                    questionDiv[i].classList.remove("green-color");
                }
            }
        }
    },
},

然后调用它...如果您希望它在渲染或创建时独立运行，请在任何生命周期钩子中调用它