Question

我正在从我的API传递params到vue-head但是每次我这样做都会在头部发送未定义的代码：

export default {
  data: () => ({
    errors: [],
    programs: [],
  }),
  methods: {
    getProgram() {
      this.api.http.get(`videos/program/${this.programSlug}`)
        .then(response => {
          this.programs = response.data
        })
        .catch(error => {
          this.errors = error
        });
    }
  },
  head: {
    title: function() {
      return {
        inner: this.programs.name,
        separator: '|',
        complement: 'Canal 10'
      };
    }
  }
}

知道我的代码出错了吗？

Answer 1

首先验证您是否正确获取信息。使用控制台日志并转到网络选项卡并验证您是否正确获取数据，您可能需要注释掉vue-head。但我认为问题可能是由于在api调用完成之前vue-head呈现，然后没有数据传递。

如果您使用的是vue-router，可以使用beforeRouteEnter（）钩子轻松解决。但如果没有！显然，vue-head有一个事件可以在渲染后发出以更新组件。我没有尝试过，但它应该工作。你可以将下面的函数添加到你的方法中，并在解析了promise之后调用它，即在then闭包中。

methods: {
  getProgram() {
    this.api.http.get(`videos/program/${this.programSlug}`)
      .then(response => {
        this.programs = response.data
        this.$emit('updateHead')
    })
    .catch(error => {
      this.errors = error
    });
  }
}

如何通过API客户端将params传递给vue-head？

1 个答案: