Question

我正在使用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>

vue.js文件

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');
      }
  }
});

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

$（this）.hasClass在vue.js

0 个答案: