代码之家 › 专栏 › 技术社区 › Daniel YC Lin

如何正确分类vue的方法?

vue.js

Daniel YC Lin · 技术社区 · 7 年前

我正在尝试在vue上编写一个方法,原始代码在这里,它是可行的。

new Vue({
  el: '#app',
  data: {
         buttonText : 'A'
  },
  methods: {
    clickA: _.throttle(function() {
      var date = new Date();
      var time = date.toLocaleTimeString();
      console.log('A clicked', time)
      this.buttonText = 'my button' + time; 
    }, 1000)
  }
});

<script src="https://unpkg.com/vue@2.5.10/dist/vue.min.js"></script>
<script src="https://unpkg.com/lodash@4.17.4/lodash.min.js"></script>
<div id="app">
  <button type="button" @click="clickA">{{buttonText}}</button>
</div>

我想用 vue-class-component 并将其分类如下,它已编译但单击无法工作。

<script lang="ts">
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
import throttle from 'lodash/throttle'

@Component
export default class App extends Vue {
  clickA () {
    throttle(function () {
      var date = new Date();
      var time = date.toLocaleTimeString();
      console.log('A clicked', time)
      this.buttonText = 'my button' + time;
    }, 1000) // max one submit per second
  }
}
</script>

1 回复 | 直到 7 年前

Vamsi Krishna 7 年前

throttle 返回函数。所以调用 throttle() 并将其分配给 clickA 这样地:

<script lang="ts">
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
import throttle from 'lodash/throttle'

@Component
export default class App extends Vue {
  clickA = throttle(function () {
      var date = new Date();
      var time = date.toLocaleTimeString();
      console.log('A clicked', time)
    }, 1000) // max one submit per second
}
</script>

编辑:

<button type="button" @click="clickA">{{buttonText}}</button>

剧本

<script lang="ts">
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
import throttle from 'lodash/throttle'

@Component
export default class App extends Vue {
    buttonText = 'my button';

  clickA = throttle( () => {
      var date = new Date();
      var time = date.toLocaleTimeString();
      console.log('A clicked', time)
       /// change button text

        this.buttonText = 'my button' + time;


    }, 1000) // max one submit per second
}
</script>

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

3 年前