Vue.js Nuxt js：如何在模板中显示承诺的结果？

我试图在我的模板中显示

{{bgColor}

。 但它只显示[对象承诺]

const { getColorFromURL } = require('color-thief-node')

  export default {
    data() {
      return {
        api_url: process.env.strapiBaseUri,
        bgColor: this.updateBgColor(this.project),
      }
    },
    props: {
      project: Object,
    },
    methods: {
      updateBgColor: async function(project){
        return await getColorFromURL(process.env.strapiBaseUri+this.project.cover.url).then((res) => {
          const [r, g, b] = res
          console.log( `rgb(${r}, ${g}, ${b})` )
          return `rgb(${r}, ${g}, ${b})`
        })
      }
    }
  }

当我在console.log上得到结果时，该函数看起来正常工作

rgb(24, 155, 97)

我想我在方法、插件和异步函数的使用之间迷失了方向

感谢您的帮助

渲染是同步的。您应该从创建的或其他合适的生命周期挂钩调用此方法，并将结果保存在组件的数据中，然后呈现该数据。

如果没有，任何像“点击”这样的事件也会很好

您可能能做的最好的事情是将return语句更改为assign语句

---

请尝试

this.something=rgb（${r}，${g}，${b}）

（当然，您必须在数据对象中定义

something

）。然后在模板中呈现{{something}}。反应性系统将完成其余的工作

因此，所有的Vue逻辑都是好的，但承诺永远无法解决，原因是：

canvas-image.js?14a5:35 Uncaught (in promise) DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

我已经将它复制到我的本地项目中，我得到了这个错误

您将无法直接从另一台服务器将图像绘制到画布中，然后使用getImageData。这是一个安全问题，画布将被视为“污染”

---

不知道它是否能解决您的问题，但您可以下载此图像。例如，将其放在资产内部。然后就从那里要了。它会起作用的

好的，谢谢！我尝试了：

created（）{getColorFromURL（process.env.strapiBaseUri+this.project.cover.url）。然后（（res）=>{const[r，g，b]=res this.bgColor=

rgb（${r}，${g}，${b}）`console.log（'bgColor:'+this.bgColor}）}）}}`这似乎有效（console.log很好）但奇怪的是，“this.bgColor”的值没有更新。有什么想法吗？你能把整个组件复制粘贴到某个地方吗？Codepen或jsFiddle，因为很难说它为什么不工作：）是的，我在这里试过：（谢谢你的帮助！）