javascript - 如何以编程方式替换 @click 事件？

Question

    <div ref="filters"></div>

    <div ref="available">
        <span class="badge badge-pill" @click="add_filter">Label</span>
    </div>

    export default{
        data(){
            ...
        },
        methods:{
            add_filter: function(event){
               this.$refs.filters.appendChild(event.target)
               event.target.removeEventListener('click', this.add_filter)
               event.target.addEventListener('click', this.remove_filter)
            },
            remove_filter: function(event){
               this.$refs.available.appendChild(event.target)
               event.target.removeEventListener('click', this.remove_filter)
               event.target.addEventListener('click', this.add_filter)
            }
        }

因此，在这种情况下，removeEventListener 不起作用。有什么方法可以实现“切换”@click 事件吗？

Answer 1

这是一个使用单一方法的示例。它检查 HTMLCollection ([...this.$refs.filters.children]) 过滤器列表是否包含基于 innerText 的单击项目。我添加了具有相同类的第二个元素，以向您展示只要文本不同，它就可以工作。

new Vue({
  el: "#app",
  data() {
    return {}
  },
  methods: {
    toggle_filter: function(event){  
    if([...this.$refs.filters.children].filter(child=>child.innerText==event.target.innerText).length==0){
        this.$refs.filters.appendChild(event.target)
      }else{
        this.$refs.available.appendChild(event.target)
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2>Filters</h2>
  <div ref="filters"></div>

<h2>Available</h2>
  <div ref="available">
    <span class="badge badge-pill" @click="toggle_filter">Label 1</span>
    <span class="badge badge-pill" @click="toggle_filter">Label 2</span>
  </div>
</div>