VueJS + TS; Component property not binding Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern) Data science time! April 2019 and salary with experience Should we burninate the [wrap] tag? The Ask Question Wizard is Live!Detecting an undefined object propertyHow do I check if an object has a property in JavaScript?How can I merge properties of two JavaScript objects dynamically?Event binding on dynamically created elements?How do I remove a property from a JavaScript object?Sort array of objects by string property valueIterate through object propertiesHow does data binding work in AngularJS?Can't bind to 'ngModel' since it isn't a known property of 'input'Vue component on Typescript doesn't bind 2 ways

Is the Standard Deduction better than Itemized when both are the same amount?

What does this icon in iOS Stardew Valley mean?

How do I stop a creek from eroding my steep embankment?

3 doors, three guards, one stone

What exactly is a "Meth" in Altered Carbon?

Identify plant with long narrow paired leaves and reddish stems

At the end of Thor: Ragnarok why don't the Asgardians turn and head for the Bifrost as per their original plan?

Understanding Ceva's Theorem

Sci-Fi book where patients in a coma ward all live in a subconscious world linked together

When a candle burns, why does the top of wick glow if bottom of flame is hottest?

Why do we bend a book to keep it straight?

Is it fair for a professor to grade us on the possession of past papers?

How does the particle を relate to the verb 行く in the structure「A を + B に行く」?

How to align text above triangle figure

Can an alien society believe that their star system is the universe?

When do you get frequent flier miles - when you buy, or when you fly?

Why is "Consequences inflicted." not a sentence?

How can I make names more distinctive without making them longer?

How discoverable are IPv6 addresses and AAAA names by potential attackers?

Using audio cues to encourage good posture

Bete Noir -- no dairy

Seeking colloquialism for “just because”

Can I cast Passwall to drop an enemy into a 20-foot pit?

Why are both D and D# fitting into my E minor key?



VueJS + TS; Component property not binding



Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)
Data science time! April 2019 and salary with experience
Should we burninate the [wrap] tag?
The Ask Question Wizard is Live!Detecting an undefined object propertyHow do I check if an object has a property in JavaScript?How can I merge properties of two JavaScript objects dynamically?Event binding on dynamically created elements?How do I remove a property from a JavaScript object?Sort array of objects by string property valueIterate through object propertiesHow does data binding work in AngularJS?Can't bind to 'ngModel' since it isn't a known property of 'input'Vue component on Typescript doesn't bind 2 ways



.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;








1















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");











share|improve this question




























    1















    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");











    share|improve this question
























      1












      1








      1








      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");











      share|improve this 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");








      javascript typescript vue.js vue-component






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Mar 8 at 17:35









      Mitchell van ManenMitchell van Manen

      62




      62






















          1 Answer
          1






          active

          oldest

          votes


















          0














          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.






          share|improve this answer























            Your Answer






            StackExchange.ifUsing("editor", function ()
            StackExchange.using("externalEditor", function ()
            StackExchange.using("snippets", function ()
            StackExchange.snippets.init();
            );
            );
            , "code-snippets");

            StackExchange.ready(function()
            var channelOptions =
            tags: "".split(" "),
            id: "1"
            ;
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function()
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled)
            StackExchange.using("snippets", function()
            createEditor();
            );

            else
            createEditor();

            );

            function createEditor()
            StackExchange.prepareEditor(
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader:
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            ,
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            );



            );













            draft saved

            draft discarded


















            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55068266%2fvuejs-ts-component-property-not-binding%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0














            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.






            share|improve this answer



























              0














              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.






              share|improve this answer

























                0












                0








                0







                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.






                share|improve this answer













                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.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Mar 8 at 19:11









                Mitchell van ManenMitchell van Manen

                62




                62





























                    draft saved

                    draft discarded
















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid


                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.

                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function ()
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55068266%2fvuejs-ts-component-property-not-binding%23new-answer', 'question_page');

                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    Save data to MySQL database using ExtJS and PHP [closed]2019 Community Moderator ElectionHow can I prevent SQL injection in PHP?Which MySQL data type to use for storing boolean valuesPHP: Delete an element from an arrayHow do I connect to a MySQL Database in Python?Should I use the datetime or timestamp data type in MySQL?How to get a list of MySQL user accountsHow Do You Parse and Process HTML/XML in PHP?Reference — What does this symbol mean in PHP?How does PHP 'foreach' actually work?Why shouldn't I use mysql_* functions in PHP?

                    Compiling GNU Global with universal-ctags support Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern) Data science time! April 2019 and salary with experience The Ask Question Wizard is Live!Tags for Emacs: Relationship between etags, ebrowse, cscope, GNU Global and exuberant ctagsVim and Ctags tips and trickscscope or ctags why choose one over the other?scons and ctagsctags cannot open option file “.ctags”Adding tag scopes in universal-ctagsShould I use Universal-ctags?Universal ctags on WindowsHow do I install GNU Global with universal ctags support using Homebrew?Universal ctags with emacsHow to highlight ctags generated by Universal Ctags in Vim?

                    Add ONERROR event to image from jsp tldHow to add an image to a JPanel?Saving image from PHP URLHTML img scalingCheck if an image is loaded (no errors) with jQueryHow to force an <img> to take up width, even if the image is not loadedHow do I populate hidden form field with a value set in Spring ControllerStyling Raw elements Generated from JSP tagds with Jquery MobileLimit resizing of images with explicitly set width and height attributeserror TLD use in a jsp fileJsp tld files cannot be resolved