0

我在 Vue 3 模板中使用以下代码

<div
  v-for="(menu, index) in menuList"
  :key="index"
  :data-tip="menu.title"
  class="tooltip tooltip-bottom px-2 py-1"
  :class="selectedTool === menu.title ? 'rounded-full bg-gray-600' : ''"
  @click="onToolSelected(menu.title)"
>
  <i class="bx text-3xl" :class="menu.class"></i>
</div>

代码工作正常，但 Vetur 扩展在该行中给出错误：:class="selectedTool === menu.title ? 'rounded-full bg-gray-600' : ''"“此条件将始终返回 'false'，因为类型 'Ref<string | undefined> | undefined' 和 'Tools' 没有重叠”。
我已经在 VsCode 设置中设置了 "vetur.validation.template": false 。但它仍然给出错误。我想知道如何解决这个 Vetur 错误。谢谢

这是完整的代码：

<template>
  <div
    class="
      absolute
      flex
      top-2
      left-1/2
      bg-gray-500 bg-opacity-90
      z-50
      space-x-4
      p-2
      rounded
      shadow-md
      transform
      -translate-x-1/2
    "
  >
    <div
      v-for="(menu, index) in menuList"
      :key="index"
      :data-tip="menu.title"
      class="tooltip tooltip-bottom px-2 py-1"
      :class="selectedTool === menu.title ? 'rounded-full bg-gray-600' : ''"
      @click="onToolSelected(menu.title)"
    >
      <i class="bx text-3xl" :class="menu.class"></i>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { Tools } from "../enums/tools";
import { useTool } from "../hooks/useTool";

export default defineComponent({
  setup() {
    const { selectTool, selectedTool } = useTool();
    const menuList = [
      { class: "bxs-pencil", title: Tools.Pencil },
      { class: "bxs-eraser", title: Tools.Eraser },
    ];

    const onToolSelected = (tool: string) => {
      selectTool(tool);
    };

    return { menuList, selectedTool, onToolSelected };
  },
});
</script>

// useTool.ts 文件

interface ToolState {
  selectedTool?: string
}

const state = reactive<ToolState>({
  selectedTool: Tools.Pencil
})

export const useTool = () => {
  const selectTool = (tool: string) => {
    state.selectedTool = tool
  }

  return { selectTool, ...toRefs(state) }
}

// 枚举/tools.ts 文件

export enum Tools {
  Pencil = "Pencil",
  Eraser = "Eraser",
}
4

0 回答 0