如何使用组合创建 Vuetify 加载按钮 api

Question

我正在尝试制作一个带有加载功能的简单 Vuetify 按钮。 Vuetify 有预制的组件。我正在尝试将他们提供的代码转换为与组合 api.

一起使用

我运行遇到 this 的问题。

这是 Vuetify 提供的内容：

<template>
  <div class="text-center">
    <v-btn
      class="ma-2"
      :loading="loading"
      :disabled="loading"
      color="secondary"
      @click="loader = 'loading'"
    >
      Accept Terms
    </v-btn>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        loader: null,
        loading: false,
      }
    },
    watch: {
      loader () {
        const l = this.loader
        this[l] = !this[l]

        setTimeout(() => (this[l] = false), 3000)

        this.loader = null
      },
    },
  }
</script>

<style>
  .custom-loader {
    animation: loader 1s infinite;
    display: flex;
  }
  @-moz-keyframes loader {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @-webkit-keyframes loader {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @-o-keyframes loader {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes loader {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
</style>

因此转换为合成 API，这就是我所在的位置。我的 watch 功能显然是错误的。不确定这是否是使用这个新 watch 的正确方法。另一个问题是如何处理 this 这种格式：

import { ref, watch } from '@vue/composition-api'

setup () {
  let loader = ref(null)
  let loading = ref(false)

  watch( () => {
    loader () {
      const l = loader.value
      this[l] = !this[l]

      setTimeout(() => (this[l] = false), 3000)

      loader.value = null
    }
  })

  return {
    loader,
    loading,
  }
}

Answer 1

为 3.x watch method, the first argument should be the ref (or array of refs) you want to observe; and the second argument is the handler/callback, which receives the new value and old value as its arguments (as seen for the callback in 2.x $watch).

例如，要设置新 ref 值的记录器：

watch(myRef, (newValue, oldValue) => console.log(newValue))

// or
watch(myRef, () => console.log(myRef.value))

关于 this：由于 loader.value 指的是其他 ref 之一，您可以为将要使用的目标 ref 创建一个查找通过 watch 回调。在此示例中，只有一个 ref（但稍后可以添加更多）：

let loading = ref(false)

const refs = {
  loading
}

watch(myRef, () => {
  console.log(refs['loading'].value)
})

总而言之，使用 Composition API 的翻译代码将如下所示：

import { ref, watch } from '@vue/composition-api'

export default {
  setup() {
    let loader = ref(null)
    let loading = ref(false)

    const refs = {
      loading
    }
    watch(loader, () => {
      const l = loader.value
      if (!l) return

      refs[l].value = !refs[l].value

      setTimeout(() => (refs[l].value = false), 3000)

      loader.value = null
    })

    return {
      loader,
      loading
    }
  }
}

demo

如何使用组合创建 Vuetify 加载按钮 api

How to create a Vuetify loading button using composition api

vue.js

vuejs2

vuetify.js

vue-composition-api