根据变量值防止点击html元素答案

【问题标题】：Prevent click on the html element according to the variable value根据变量值防止点击html元素
【发布时间】：2021-02-04 21:25:07
【问题描述】：

我在一个组件中有这个可点击的div，当点击div 时它会触发一个待办事项功能：

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

另外，我在组件中有一个名为 price 的全局变量。

我需要使上面的div 可点击，或者仅当价格值大于100 时才可触发待办事项功能。

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

【问题讨论】：

todo() 函数是否可以访问全局变量price？也许可以试试<div @click=`${price > 100 ? 'todo()' : ''}`></div> 顺便说一句，我对vue没有经验....

标签： javascript vue.js ecmascript-6 onclick

【解决方案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>

【讨论】：

【解决方案2】：

一般来说，使divs 可点击通常是不好的做法，因为它会使您的界面变得非常不清晰，并且让用户感到困惑。

考虑到这一点，我认为将div 替换为button 元素会更容易，因为buttons 允许您使用disabled 属性来防止点击：

new Vue({
  el: '#app',
  data() {
    return {
      price: 100
    }
  },
  computed: {
    priceIsOver() {
      return this.price > 100;
    }
  },
  methods: {
    todo() {
      console.log('doing stuff');
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  <div>
    Price: {{price}} <button @click="price++">+</button> <button @click="price--">-</button>
  </div>
  <br>
  <button :disabled="!priceIsOver" @click="todo">TODO</button>
</div>

【讨论】：