Why is my component property not binding when I set the related component attribute to a value? Even when inspecting with Vue devtools or outputting the value into the HTML, it remains at the default value set on the component.
I tried setting a string attribute to a static string, but even that isn't binding.
The component doesn't appear in the HTML except for the top-level div, but Vue devtools detect the component in the DOM.
Code:
Component 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>
Component 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);
}
}
Parent HTML using the component:
<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" />
Parent 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");
}
}