Vue Vuetify从api动态绑定图片。

Question

我想把一个图像动态地绑定到我的 <v-img> 组件。

<template>
  <v-img
    id="image"
    :src=backgroundImage
    aspect-ratio="1"
    class="grey lighten-2"
  >
  </v-img>
</template>

在我的脚本中，我正在加载一个默认的图片，在调用挂载方法中的一个路由，它随机给我一个来自服务器的图片。请求成功，我成功地得到了一个图像的url，它的工作，但我无法将其绑定到我的图像src。

<script>
export default {
  data: () => {
    backgroundImage: 'https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg'
  },

  mounted () {
    setBgImg();
  },

  methods: {
    // get random background image 
    async setBgImg() {
      const route = 'http://localhost:4000/api/image/random';
      const { data } = await axios.get(route);

      this.backgroundImage = data[0].image;
    }
  }
}
</script>

编辑忘记粘贴错误信息了，这里是。

> Cannot use 'in' operator to search for 'backgroundImage' in undefined

Answer 1

有一些东西需要更新。

首先data需要在vue中返回一个对象。

    export default {
        data: () => ({
        backgroundImage: ''
    }),

其次你需要调用 setBgImg() 办法 this:

      mounted () {
        this.setBgImg();
      },

之后，你应该能够从api中显示给定的图片。

      <v-img
        id="image"
        :src="backgroundImage"
        aspect-ratio="1"
        class="grey lighten-2"
      >

Answer 2

如果你从Chrome开发工具的控制台检查，你应该会看到基于上述代码的一些错误，即this.backgroundImage未定义。

data () 方法应该返回一个对象

data () {
    return {
       backgroundImage: 'https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg'
    }
}