CODEWITHSUNDEEP
javascriptvue.js
bboy
bboy

Reputation: 1408

vuejs props are undefined after refresh

App.vue

template:

<ResponsiveNavigation
  :nav-links="navLinks"
/>

script

data: () => ({
  navLinks: []
}),

created: function() {
  this.getSocialNetworks();
},

methods: {
    getSocialNetworks() {
      var self = this;

      axios
        .get(MY_API_URL)
        .then(function(res) {
          var fb_url = res.data.data.filter(obj => {
            return obj.key === "Social_Facebook";
          });
          self.navLinks.fb = fb_url[0].defaultValue;
          //
          var ig_url = res.data.data.filter(obj => {
            return obj.key === "Social_Instagram";
          });
          self.navLinks.ig = ig_url[0].defaultValue;
          //
        })
        .catch(function(error) {
          console.log("Error", error);
        });
    }
  }

ResponsiveNavigation.vue:

<a :href="$props.navLinks.fb"></a>

if I console.log the $props.navLinks I have everything stored.

however in the href doesn't work after the FIRST load.

Upvotes: 0

Views: 874

Answers (1)

Simon
Simon

Reputation: 736

I am fairly sure that this is due to the reactive nature and UNreactive of arrays.

You're not really using an array, but an object

data: () => ({
  navLinks: []
}),

to

 data: () => ({
  navLinks: {
    fb:'', 
    ig:''}
}),

and I think it would setup the reactive props more suitably.

If you need an array, then use array.push() so it can react accordingly. I may also consider moving it to the mounted() method. Finally, you put $props in your code, do you have other props you've not shown us which may be conflicting?

Upvotes: 1

Related Questions