VueJS + TS；组件属性不绑定答案

【问题标题】：VueJS + TS; Component property not bindingVueJS + TS；组件属性不绑定
【发布时间】：2019-07-30 18:49:24
【问题描述】：

我试图通过将相关组件属性设置为一个值来绑定组件属性，但在使用 Vue devtools 检查或将值输出到 HTML 时它没有绑定该值。该值仍需设置为在组件上设置的默认值。

我将一个字符串属性设置为只是一个静态字符串，即使它没有绑定。

该组件也根本不输出到 html 中，除了顶级 div，但 Vue devtools 确实检测到 dom 中的组件。

代码：

组件 HTML：

<style scoped lang="sass">
  @import './discord-widget.scss';
</style>

<template>
  <div>
    <b-card bg-variant="dark" :header="`Currently online: ${widgetData.members.length}`" text-variant="white">
      <div v-for="user in widgetdata.members" class="discord-member">
        <img :src="user.avatar_url" alt="" class="d-inline-block">
        <div class="d-inline-block align-top has-game" v-if="user.game">
          <span>{{ user.username }}#{{user.discriminator}}</span>
          <span><br />Playing <b>{{ user.game.name }}</b></span>
        </div>
        <div class="d-inline-block" v-else>
          <span>{{ user.username }}#{{user.discriminator}}</span>
        </div>
      </div>
    </b-card>
  </div>
</template>

<script src="./discord-widget.ts"></script>

组件 ts：

import Vue from "vue";
import { DiscordWidgetResult } from "../../models/discord";
import Component from "vue-class-component";
import { Prop } from "vue-property-decorator";

@Component
export default class DiscordWidgetComponent extends Vue {

  @Prop(Object) public widgetdata: DiscordWidgetResult = {} as DiscordWidgetResult;
  @Prop(String) public test: string = "";

  async mounted() {
    this.widgetdata.members = this.widgetdata.members.sort((a, b) => a.game ? -1 : b.game ? -1 : 0);
  }
}

使用组件的父 HTML：

<discord-widget :widgetdata="widgetdata" v-on:load="getWidgetData" :test="'test'" class="pull-right ml-auto p-2 d-none d-sm-none d-md-none d-lg-block sticky-top" />

父 ts：

import Vue from "vue";
import { Provide } from "vue-property-decorator";
import { DiscordWidgetResult } from "../../models/discord";
import { discordWidgetService } from "../../boot";

export default class NopeGamingView extends Vue {

    @Provide()
    public widgetdata: DiscordWidgetResult = {} as DiscordWidgetResult;

    async created() {
    }

    async getWidgetData() {
        this.widgetdata = await discordWidgetService.GetGuildData();
        console.log("get data");
    }
}

【问题讨论】：

标签： javascript typescript vue.js vue-component

【解决方案1】：

所以，原来我的错误很简单，但很容易被忽视。

我忘记将“@Component”装饰器放在我的“NopeGamingView”上，这导致它不是一个实际的组件。如果您遇到类似的问题，请确保您的视图中有装饰器。

【讨论】：