【问题标题】: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?也许可以试试&lt;div @click=`${price &gt; 100 ? 'todo()' : ''}`&gt;&lt;/div&gt; 顺便说一句,我对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>

    【讨论】:

      猜你喜欢
      • 2014-12-27
      • 2012-06-09
      • 1970-01-01
      • 1970-01-01
      • 2019-08-28
      • 2014-01-14
      • 1970-01-01
      • 1970-01-01
      • 2023-03-22
      相关资源
      最近更新 更多