VueJS + TS; Component property not binding

Question

I am trying to bind a component property by setting the related component attribute to a value but it is not binding the value when inspecting with Vue devtools or when outputting the value into the HTML. The value remains to be set to the default value that is set on the component.

I event set a string attribute to just a static string and even that is not binding.

The component also isn't outputted into the html at all, besides the top level div, but the Vue devtools do 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");
    }
}

Mitchell van Manen Mitchell van Manen · Accepted Answer · 2019-03-08T19:11:19

So, turned out my error was quite a simple one but easy to overlook.

I had forgotten to put the '@Component' decorator on my 'NopeGamingView' which caused it to not be an actual component. If you encounter as similar problem make sure you have the decorator on your view.

VueJS + TS; Component property not binding

1 Answers