className 在 VueJS 方法中不起作用答案

【问题标题】：className not working in VueJS methodclassName 在 VueJS 方法中不起作用
【发布时间】：2017-01-12 02:43:27
【问题描述】：

我想用“链接”上的类更改所有元素的类名。我正在使用一种通过元素上的单击操作调用的方法。我测试了从函数中获取长度并且效果很好，但添加一个类却不行。有人知道为什么吗？

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>

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

【问题讨论】：

标签： javascript vuejs2 vue.js

【解决方案1】：

document.getElementsByClassName('link')

返回给你一个html元素的类数组对象，.className是这个对象中每个元素的一个属性，也许你可以试试这个：

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

改为。

【讨论】：

谢谢，是一种将类添加到所有这些元素的方法，也许使用 forEach 循环？

【解决方案2】：

您正在尝试使用当前代码更改所有链接上的类。

我的建议是：

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

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

如果您希望它们在单击时全部“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 了。理想情况下，您希望根据您所处的某些状态更改这些类。不过，您需要进一步澄清您的问题以获得更好的答案。

【讨论】：

谢谢，但我希望所有链接都改变，而不仅仅是 currentTarget。我知道在 Vue 中有更简单的方法可以实现这一点，但我发现 Vue 缺乏修改 dom 的简单方法。因此，我试图衡量如何执行在 jQuery 中很容易但在 Vue 中困难的任务。我想在未来的项目中使用 Vue，我希望用 Vue 替换 jQuery，但我想我可能仍然需要使用 jQuery 进行 dom 操作。
使用 Vue 修改 DOM 要容易得多，因为它直接与数据相关联。你可以做<a v-for="link in 3" @click.prevent="allSelected = !allSelected" :class="{ selected: allSelected }">Link {{ link }}</a>。
但你会发现这有点愚蠢，没有押韵或理由。

【解决方案3】：

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

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

this.$el.getElementsByClassName('link')

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

【讨论】：