刷新后 vuejs 道具未定义

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

响应式导航.vue：

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

如果我控制台记录$props.navLinks 我已经存储了所有内容。

但是在第一次加载后，href 不起作用。

Answer 1

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

您实际上使用的不是数组，而是一个对象

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

到

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

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

如果您需要一个数组，请使用 array.push() 以便它可以做出相应的反应。我也可以考虑将其移至mounted() 方法。最后，您将 $props 放入您的代码中，您是否还有其他未向我们展示的可能有冲突的 props？