Nuxt js: Как отобразить результат из обещания в шаблоне? - PullRequest
Новая
       12

Nuxt js: Как отобразить результат из обещания в шаблоне?

0 голосов
/ 29 февраля 2020

Я пытаюсь отобразить {{ bgColor }} в моем шаблоне. Но он отображает только [объект Promise] 

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)

Я думаю, что я Заблудился между методами, плагином и использованием асин c функции.

Любая помощь приветствуется!

Ответы [ 2 ]

0 голосов
/ 10 марта 2020

Так что все ваши Vue логи c хороши, но обещание так и не решено, потому что: 

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 () Холст был испорчен данными из разных источников?

Вы не сможете рисовать изображения напрямую с другого сервера в холст а затем использовать getImageData. Это проблема безопасности, и холст будет считаться «испорченным».

Не знаю, решит ли это вашу проблему, но вы можете загрузить это изображение. И положить, например, внутри активов. Тогда просто потребовал это оттуда. И это будет работать

0 голосов
/ 01 марта 2020

https://forum.vuejs.org/t/render-async-method-result-in-template/36505/3

Render is sync. You should call this method from created or some other suitable lifecycle hook and save the result in component’s data, then render that data. Если не жизненный цикл, любое событие, такое как «щелчок», будет также хорошим

Лучшее, что вы, вероятно, можете сделать, это изменить оператор return для назначения оператора

Вместо return 'rgb(${r}, ${g}, ${b})' try this.something = rgb(${r}, ${g}, ${b})' (конечно, вы должны определить something в объекте данных). Затем просто визуализируйте {{кое-что}} в своем шаблоне. Система реактивности сделает все остальное

...