Question

我正在使用vuetify，按钮上有一个工具提示。我不想在悬停或单击时显示工具提示，我想在触发某些事件时显示工具提示。

translate.vue

IF NOT EXISTS(SELECT * FROM [__EFMigrationsHistory] WHERE [MigrationId] = N'20200806210137_FooBar')
BEGIN
    EXEC('INSERT INTO [__EFMigrationsHistory] ([MigrationId], [ProductVersion])
    VALUES (N''20200806210137_FooBar'', N''3.1.6');')
END;

itemSelect.vue （我在其中创建对象项，然后使用路由器推送将其传输到翻译页面）

<v-tooltip v-model="item.showTooltip" top>
  <template v-slot:activator="{}">
    <v-btn @click="translateItem(item)"> Call API to translate</v-btn>
  </template>
  <span>API quota limit has been reached</span>
</v-tooltip>


<script>
export default(){
  props: {
    item: { default: Objet}
  }
 methods: {
   translateItem: function (item) {
     axios
       .post(baseURL + "/translateAPI", {
         text: item.originTrad;
       })
       .then((res) => {
          if (apiQuotaLimitReached(res) { 
            // If limit is reached I want to show the tooltip for some time
            item.showTooltip = true;
            setTimeout(() => {item.showTooltip = false;}, 3000);
            } else  { ..... }}}
</script>

如您所见，我删除了在示例：https://vuetifyjs.com/fr-FR/components/tooltips/中找到的<script> export default(){ methods: { createItem: function () { item.originTrad = "the text to translate" .... item.showTooltip = false; this.$router.push({ name: "translate", params: { "item": item, }, }); }} </script>和v-slot:activator="{ on }"，因为我不想在悬停时显示工具提示。但是它没有按预期工作，工具提示无法正确显示。一些帮助会很棒：）

Answer 1

对于初学者来说，您正在尝试更改子组件中的prop，这是您不应该做的事情：

[Vue警告]：避免直接更改道具，因为该值将是父组件重新渲染时覆盖。而是使用数据或基于属性值的计算属性。道具被变异：“ item.showTooltip”

因此，首先为showTooltip创建一个单独的数据变量（不必是项本身的属性），然后尝试将其设置为true以查看会发生什么（当然，将v-model="item.showTooltip"更改为{{1 }}（在v-tooltip上）

Vuetify触发工具提示

1 个答案: