Question

App.vue

模板：

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

脚本

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>

如果我console.log $props.navLinks，我已存储了所有内容。

但是第一次加载后，href中的

不起作用。

Answer 1

我相当确定这是由于数组的反应性和不反应性造成的。

您并不是真正在使用数组，而是在使用对象

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

到

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

我认为它将更合适地设置反应性道具。

如果需要数组，请使用array.push（）使其相应地做出反应。我也可以考虑将其移至Mounted（）方法。最后，您在代码中放入了$ props，是否还有其他未显示给我们的道具可能会冲突？

刷新后未定义vuejs道具

1 个答案: