Javascript $（this）.hasClass在vue.js中工作不正常_Javascript_Jquery_Class_Vue.js

Javascript $（this）.hasClass在vue.js中工作不正常

javascript jquery class vue.js

Javascript $（this）.hasClass在vue.js中工作不正常,javascript,jquery,class,vue.js,Javascript,Jquery,Class,Vue.js,我正在用v-for建立一个项目列表 <html> <head> <meta charset="utf-8"> </head> <body> <div id="main"> <div id="vue-wrapper"> <div v-for="item in all_items"> <div class="single-item" v-on:click

我正在用v-for建立一个项目列表

<html>
<head>
  <meta charset="utf-8">
</head>

<body>
  <div id="main">
    <div id="vue-wrapper">
      <div v-for="item in all_items">
        <div class="single-item" v-on:click="selectItem(item)"></div>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js">
</script>
</html>

单击单个项时，如果div的类为“active”，我需要打印item.name，否则只需添加它。问题是if（$（this）.hasClass（'active'））总是返回false，即使该类被设置为active。我也尝试过使用$（this.$el）而不是$（this），但没有成功。我还尝试使用Jquery单击处理程序，但我不知道如何获取该项

如果您在Vue应用程序中使用类似于

$（this）.hasClass

的代码，您就误解了Vue的意义。详细说明一下，您的

数据

数组应该包含以下内容：[{name:'Jhon'，姓氏：'Red'，active:true}.Vue是关于对数据做出反应的-您应该检测/更改数据中的活动状态-

这一点。所有项[0]。active=true

排序，而不是通过DOM中的类。然后，在模板中应用类。

v-bind:class=“{active:item.isActive}”v-on:click=“item.isActive=！item.isActive”

我认为，如果您使用的代码类似于

$（this）。hasClass

在Vue应用程序中，您误解了Vue的意义。要详细说明一点，您的

数据

数组应该包含

所有项：[{name:'Jhon'，姓氏：'Red'，active:true}

。Vue是关于对数据做出反应的-您应该检测/更改数据中的活动状态-

这一点。所有项[0]。active=true

排序，而不是通过DOM中的类。然后，在模板中应用类。

v-bind:class=“{active item.isActive}”v-on:单击=“item.isActive=！item.isActive”

我认为，如果不回答这个问题，就可以给出我认为在链接问题中没有回答的答案

var vue = new Vue({
  el: '#vue-wrapper',
  data: {
    all-items: [{ name: 'Jhon', surname: 'Red' }, { name: 'Rick', surname: 'White' }]
  },
  methods: {
    selectItem: function (item) {
      if($(this).hasClass('active')){
        console.log(item.name);
      } else {
        $(this).addClass('active');
      }
  }
});