className 在 VueJS 方法中不起作用

Question

我想更改 "link" 上具有 class 的所有元素的 class 名称。我正在使用一种通过元素上的单击操作调用的方法。我测试了从函数中获取长度并且工作正常但添加 class 没有。有人知道为什么吗？

HTML

<div id="app">
  <ul>
    <li><a href="#" class="link" @click="myFunc">Link text 1</a></li>
    <li><a href="#" class="link" @click="myFunc">Link text 2</a></li>
    <li><a href="#" class="link" @click="myFunc">Link text 3</a></li>
  </ul>
</div>

JS

var app = new Vue({
el: '#app',
methods: {
  myFunc: function(event){

      // works
      var ElLength = document.getElementsByClassName('link').length;
      console.log('ElLength = ' + ElLength);

      // does not work
      document.getElementsByClassName('link').className += " hullaballoo";

    }
  }
});

JSFIDDLE

Answer 1

document.getElementsByClassName('link')

returns 你是 html 元素的 array-like 对象，而 .className 是这个对象中每个元素的属性，也许你可以试试这个：

document.getElementsByClassName('link')[0].className += " hullaballoo";

相反。

Answer 2

您正在尝试使用当前代码更改所有 link 上的 class。

我建议的是：

event.currentTarget.classList.toggle('hullaballoo');

event.currentTarget 将永远是您点击的 link。

如果您想要全部 "hullaballoo" 单击其中一个，您可以执行以下操作：

<a v-for="link in 3" 
   href="#probably-actually-want-a-button"
   @click.prevent="allSelected = !allSelected"
   :class="{ hullaballoo: allSelected }">
   Link {{ link }}
</a>

但是，必须这样做并不是利用 Vue。你也在想 DOM 喜欢。理想情况下，您希望根据您所处的某些状态更改这些 classes。不过，您需要进一步澄清您的问题以获得更好的答案。

Answer 3

接受的答案将 return 文档中的所有匹配元素。

如果你只是想在你的组件中获取它们，你可以这样做：

this.$el.getElementsByClassName('link')

https://vuejs.org/v2/api/#vm-el

className 在 VueJS 方法中不起作用

className not working in VueJS method

javascript

vue.js

vuejs2