Javascript VueJS+;TS;组件属性不绑定
我试图通过将相关组件属性设置为值来绑定组件属性,但在使用Vue devtools进行检查或将值输出到HTML中时,该属性没有绑定该值。该值仍需设置为组件上设置的默认值 我将一个string属性设置为一个静态字符串,即使它没有绑定 除了顶级div之外,该组件也根本不会输出到html中,但是Vue devtools会在dom中检测该组件 代码: 组件HTML:Javascript VueJS+;TS;组件属性不绑定,javascript,typescript,vue.js,vue-component,Javascript,Typescript,Vue.js,Vue Component,我试图通过将相关组件属性设置为值来绑定组件属性,但在使用Vue devtools进行检查或将值输出到HTML中时,该属性没有绑定该值。该值仍需设置为组件上设置的默认值 我将一个string属性设置为一个静态字符串,即使它没有绑定 除了顶级div之外,该组件也根本不会输出到html中,但是Vue devtools会在dom中检测该组件 代码: 组件HTML: <style scoped lang="sass"> @import './discord-widget.scss'; &l
<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>
使用组件的父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" />
所以,我的错误很简单,但很容易被忽视
我忘了把“@Component”装饰器放在我的“NopeGamingView”上,这导致它不是一个实际的组件。如果您遇到类似的问题,请确保您看到了装饰师。因此,我的错误很简单,但很容易被忽略 我忘了把“@Component”装饰器放在我的“NopeGamingView”上,这导致它不是一个实际的组件。如果您遇到类似的问题,请确保您的视图中有装饰者
<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" />
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");
}
}