Question

我在网站上使用vue-head因为我必须将程序的名称传递给html头部和inf。它来自API，所以我提出请求，但每次我尝试传递名称时，它都会向我发送错误代码：

export default {
  data: () => ({
    errors: [],
    programs: [],
    firstVideo: {},
    vidProgram: {}
  }),
},
  created() {
    //do something after creating vue instance
    this.api = new ApiCanal({})
    this.getProgram()
  },
  methods: {
    getProgram() {
      this.api.http.get(`videos/program/${this.programSlug}`)
        .then(response => {
          this.programs = response.data
          this.firstVideo = response.data[0]
          this.vidProgram = response.data[0]['program']
        })
        .catch(error => {
          this.errors = error
        });
    }
  },
  head: {
  //this is the inf. for the head
    title: {
      inner: this.programs.name,
      separator: '-',
      complement: this.programs.info
    }
  }
}

如果你能帮我解决这个问题，我将非常感激

Answer 1

如果要在title中使用Vue对象/组件的属性，则需要make it a function，因为当前this指的是创建Vue组件的对象（可能全局window对象）。

head: {
  title: function() {
    return {
      inner: this.programs.name,
      separator: '-',
      complement: this.programs.info
    };
  }
}

如何通过vue-head将我的API中的值传递给我的头？

1 个答案: