小编the*_*dog的帖子

当我将脚本创建为打字稿 (lang="ts") 时，我收到一条错误消息

“找不到模块‘./components/Navigation’或其相应的类型声明（Vetur 2307）。”。

我意识到这只有在我将 lang 设置为 ts 时才会发生，这正是我构建 Vue 应用程序所需要的。

应用程序

<template>
  <Navigation />
</template>

<script lang="ts">
import Navigation from './components/Navigation'; // This is where I get the error message

export default {
  name: 'app',
  components: {
    Navigation,
  }
}
</script>

导航.vue

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> 
    <router-link to="/about">About</router-link> 
    <router-link to="/categories">Categories</router-link> 
    <router-link to="/random">Random</router-link>
  </div>
  <router-view />
</template>

<script lang="ts">
export default {
  name: 'Navigation',
}
</script>

在我的注册表中，我有一个复选框，用于确认用户是否接受条款和条件。一旦我点击提交按钮，该复选框就应该验证，但是由于该复选框最初未被选中，因此验证错误会立即显示。最终，一旦我勾选了复选框，错误就会反应性地消失，但对于这个特定的场景，我希望只有在点击提交后才会显示验证错误（如果我没有选中它）。我没有收到任何特定的控制台错误，但我只是卡在执行上。有人能告诉我如何实现这一目标吗？我将不胜感激任何帮助！

Checkbox.vue - 这是代表​​复选框的组件。

<template>
  <div class="check-wrapper">
    <label :for="id" class="check-label">
      <input v-model="checkboxValue"
             :id="id"
             :checked="isCheckboxChecked"
             :oninput="checkCheckbox()"
             type="checkbox"
             name="newsletter"/>
      <span v-if="labelText && !isLabelHtmlText">{{ labelText }}</span>
      <span v-if="labelText && isLabelHtmlText" class="label-html" v-html="labelText"></span>
      <span :class="{'check-mark-error': checkboxError}" class="check-mark"></span>
    </label>
    <p v-if="checkboxError" class="checkbox-error text-error">{{checkboxError}}</p>
  </div>
</template>

<script>
  data: () => ({
    checkboxValue: false
  }),
  methods: {
    updateValue: function () {
      if (this.$props.callback) {
        this.$props.callback(this.$props.id, this.$props.checkboxData, this.checkboxValue);
      }
    },
    checkCheckbox: function () {
      this.updateValue();
    }
  }
</script>

Register.vue - 这是进行注册的父组件

<template>
   <BasicCheckbox :id="'terms-privacy'"
                  :callback="onTermsClick"
                  :label-text="'terms and conditions'" …

我正在尝试使用 TypeScript 和基于类的组件来设置 Vue 3。但是，我在将Component装饰器导入Vue构造函数时不断出错：

This expression is not callable. Type 'typeof
import("/Users/*folder*/node_modules/vue-class-component/dist/vue-class-component")'
has no call signatures. Vetur(2349)

Run Code Online (Sandbox Code Playgroud)

我的代码.vue：

This expression is not callable. Type 'typeof
import("/Users/*folder*/node_modules/vue-class-component/dist/vue-class-component")'
has no call signatures. Vetur(2349)