标签: vue-class-components

<script>\n import * as Vue from 'vue'\nimport Component from 'vue-class-component'\n\n@Component\nexport default class HelloWorld extends Vue {\n  //my operation\n}\n\n</script>\n

这是一个简单的示例vue-class-component。\n但是，当我运行我的项目时，浏览器显示以下错误：

Uncaught TypeError: Class extends value #<Object> is not a constructor or null\nat eval (HelloWorld.vue?e90b:39:1)\nat Module../node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/HelloWorld.vue?vue&type=script&lang=js (app.js:19:1)\nat __webpack_require__ (app.js:315:33)\nat fn (app.js:570:21)\nat eval (HelloWorld.vue?vue&type=script&lang=js:5:213)\nat Module../src/components/HelloWorld.vue?vue&type=script&lang=js (app.js:162:1)\nat __webpack_require__ (app.js:315:33)\nat fn (app.js:570:21)\nat eval (HelloWorld.vue:3:97)\nat Module../src/components/HelloWorld.vue (app.js:140:1)\n

为什么会出现这种情况？并且cmd还显示这样的警告：

in ./node_modules/vue-class-component/dist/vue-class-component.esm.js\nexport 'default' (imported as 'Vue') was not found in 'vue' (possible exports: BaseTransition, Comment, EffectScope, Fragment, KeepAlive, ReactiveEffect, Static, …

yarn dev 返回此错误。

WARNING in ./Js/App.vue?vue&type=script&lang=ts& 1:166-169
"export 'default' (imported as 'mod') was not found in '-!../node_modules/ts-loader/index.js!../node_modules/vue-loader/lib
/index.js??vue-loader-options!./App.vue?vue&type=script&lang=ts&'
 @ ./Js/App.vue
 @ ./Js/dashboard.ts
 @ multi ./Js/dashboard.ts ./Sass/dashboard.scss

我正在使用带有打字稿的 vue。

这是我的 ts-config.json

{
"compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["webpack"],
    "paths": {
        "@/*": ["Js/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
},
"include": ["Js/**/*.ts", "Js/**/*.vue", "Js/tests/**/*.ts"],
"exclude": ["node_modules"]}

这是我的 main.ts

import Vue from "vue"; …

我遇到的问题是，在应用程序从服务器后端获取一些数据后，我的 UI 无法更新。

我有以下代码：

<template>
  <div v-if="restaurant">
    <div class="center logo-container">
        <img class="img-fit" v-bind:src="'/api/restaurant/logo/' + restaurant.id" alt=""/>
    </div>
    <h2 class="title center dm-text-header">{{ restaurant.name }}</h2>
    <h4 class="subheading center">{{ restaurant.address.street }}, {{ restaurant.address.city }}</h4>     
  </div>
</template>

<script lang="ts">
import axios from 'axios';
import { Options, Vue } from "vue-class-component";
import { Tag } from "./Tag";
import { Restaurant } from "./Restaurant";

@Options({
  props: {
  }
})
export default class Menu extends Vue {  
  // hardcoded for testing 
  restaurantId =  "8ykw9ljq";   

  tagUrl = "/api/menu/" …

I am using Typescript Class component and I have this problem I can't use this.$refs.<refname>.focus()

Template Code:

 <header class="py-2 px-1 m-0 row">
    <input
      type="text"
      class="form-control m-1"
      ref="searchBoard"
      placeholder="Find boards by name..."
    />
  </header>

This input field is inside a popup.

Typescript Code:

import { Component, Vue } from "vue-property-decorator";

@Component
export default class BoardList extends Vue {

  // I added this to solve the compile error
  $refs!: {
    searchBoard: HTMLInputElement;
  };

  isShown = false;

  toggleDropdown() {
    this.isShown = !this.isShown; …

我刚刚将我的 Vue 项目迁移到 Typescript，但有一种情况我需要管理。

我需要在应用程序中处理一些分页表，因此我创建了一个Tablemixin 来处理我的记录集合的分页：

@Component
export default class Table<T> extends Vue {
  records: T[] = []

  page: number = 0
  length: number = 20

  get total () {
    return this.records.length
  }

  get visibleRecords(): T[] {
    return this.records.slice(this.page*this.length, (this.page+1)*this.length)
  }

  public changePage (newPage: number) {
    this.page = newPage
  }
}

每个渲染表、扩展 mixin、填充属性并简单显示计算属性records的结果的组件。visibleRecords一个基本组件：

export default class Sampletable extends Mixins(Table) {

  records: RecordType[] = [ .... my data array ... ]
}

<template>
  <table>
    <tr …