在 nuxt/vue 中来自 apollo 的数据发生变化后，子元素不更新道具

Posted 2023-03-10

【中文标题】在 nuxt/vue 中来自 apollo 的数据发生变化后，子元素不更新道具

【英文标题】：Child element not updating props after change in data coming from apollo in nuxt/vue

【发布时间】：2020-10-07 15:45:24

【问题描述】：

更新：主要问题似乎是道具只更新一次。当 this.campaign.name 可用时，它们应该会改变。

我想动态更新标题和面包屑数据字段并将它们显示在页面上。当前页面页面显示未定义或为空。我该如何解决这个问题？

我尝试创建一个计算值，但它似乎只更新一次（在头部和面包屑数据已经显示之后）。方法不起作用，因为我没有任何东西可以触发该方法。

解决这个问题的正确方法是什么？

我正在使用 nuxt generate 来部署应用程序。

export default 
  components:  PageHeader ,
  middleware: 'authenticated',
  data() 
    return 
      title: 'Campaigns' + this.campaignName,
      breadcrumb: [
        
          text: 'Campaigns',
          href: '/'
        ,
        
          text: this.campaignName,
          href: '/'
        
      ],
      campaign: ''
    
  ,
  apollo: 
    campaign: 
      prefetch: true,
      query: campaignQuery,
      variables() 
        return  id: this.$route.params.id 
      
    
  ,
  computed: 
    campaignName() 
      return this.campaign && this.campaign.name
    
  ,
  head() 
    return 
      title: this.title
    
  

</script>

【问题讨论】：

您的 apollo 查询“活动”是否真的返回了一些东西？您可以 console.log() 活动或将其打印在模板中吗？首先从您的数据元素中删除广告系列。

是的，当我在模板中打印它时可以看到该对象，我认为问题是在标题和面包屑数据已经设置后加载了 apollo 数据。例如this.campaign = "id": "3", "name": "new postpaid", "description": null, "__typename": "Campaign"

或者 pageheader 属性中的值只更新一次。

【参考方案1】：

您的计算属性 campaignName 返回 undefined 因为 this.campaign.name 未定义

campaignName() 
      if(this.campaign && this.campaign.name) return "Campaigns" + this.campaign.name;
      return "default value";
    

那么就可以直接在head中使用了

head() 
    return 
      title: this.campaignName
    
  

【讨论】：

当我尝试这个时仍然未定义。此外，活动名称输出不正确。仅应添加标题“广告系列”。

如果你做对了，无论如何标题必须是“默认值”，你把标题标题固定字符串了吗？

【参考方案2】：

解决方案是将数据元素直接作为计算机属性。 （所以无需重新计算）

export default 
  components:  PageHeader ,
  middleware: 'authenticated',
  data() 
    return 
  ,
  apollo: 
    campaign: 
      prefetch: true,
      query: campaignQuery,
      variables() 
        return  id: this.$route.params.id 
      
    
  ,
  computed: 
    title() 
      return this.campaign && `Campaign: $this.campaign.name`
    ,
    breadcrumb() 
      return [
        
          text: 'Campaign',
          href: '/'
        ,
        
          text: this.campaign && this.campaign.name,
          href: '/'
        
      ]
    
  ,
  head() 
    return 
      title: this.title
    
  

</script>