我有多个列表项,我想在单击活动类时打开它们.

<ul class="list-body">
    <li v-on="click: setFilter('style', 'pils')" v-class="active: isActive">Pils</li>
    <li>Dubbel</li>
    <li>Tripel</li>
    <li v-on="click: setFilter('style', 'Quadrupel')">Quadrupel</li>
    <li>Wit</li>
</ul>

我已经有了一个点击setFilter次的功能,我可以添加额外的功能来激活onClick类.

setFilter: function(facet, value) {
    // Facet for style of beer(search filter)
    this.helper.addDisjunctiveFacetRefinement(facet, value).search();
},

我的问题是,如何 Select 单击并调用with setFilter方法的特定li元素?

我想为已单击(或未单击)的每个li元素的活动类falsetrue设置一个变量.

推荐答案

可以直接在函数中传递事件和事件目标.

HTML:

<ul id="demo">
    <li v-on="click: onClick">Trigger a handler</li>
    <li v-on="click: n++">Trigger an expression</li>
</ul>

JS:

var vue = new Vue({
  el: '#demo',
  data: {},
  methods: {
    onClick: function (e) {
      var clickedElement = e.target;
    }
  }
})

有了你的元素,你可以做你想做的事.

$(clickedElement).siblings().removeClass('active');
$(clickedElement).addClass('active');

Vue.js相关问答推荐

虚拟DOM在Vue中姗姗来迟

将Vite Vuejs应用部署到Apache服务器

Vue.js编译的render函数不起作用

Vue 3 需要 main.js 中的文件

Vue 2 如何在全局函数中返回观察者

Nuxt3: 安装vue3-spinner (error: require is not defined in ES module scope)

如何在vue js模板中添加foreach和for循环

Nuxt3-Vue中的useRoute和useRouter有什么区别

如何容器化 Vue.js 应用程序?

使用数组元素的计算(computed)属性

为什么不先移动鼠标就无法滚动视差?

v-model 不会检测到 jQuery 触发事件所做的更改

即使在客户端设置 Access-Control-Allow-Origin 或其他 Access-Control-Allow-* 标头后也出现 CORS 错误

如何在 Vue 中转发 $refs

动态注册本地 Vue.js 组件

Vuetify Jest 未知自定义元素

加载时焦点文本框上的 Vue.js

如何在两个属性上使用 Vue/Vuetify 自动完成过滤器?

在 Vuejs 中放置 firebase.auth().onAuthStateChanged() 的位置

Mapbox 事件监听器