javascript - 根据变量值防止点击html元素

Question

我div在一个组件中有这个可点击的，当点击它时它会触发一个 todo 函数div：

<div @click="todo()"></div>

另外，我在组件中有一个名为price.

我需要使div上述可点击，或者仅当价格值大于 100 时才可触发 todo 函数。

如何在 Vue 中实现这种行为？

标签： javascriptvue.jsecmascript-6onclick

Answer 1

我想你可以像这样简单地编写一个包装函数：

<template>
  <div @click="onClick"></div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      price: 0
    }
  },
  computed: {
    isTodoCallAllowed() {
      return this.price > 100;
    }
  },
  methods: {
    onClick() {
      if(this.isTodoCallAllowed) {
        this.todo();
      }
    },
    todo() {
      //
    }
  }
}
</script>