Question

我正在尝试在加载页面时获取随机图像。我不明白为什么这不起作用......任何人？当它作为小提琴运行时它可以工作，但不能在我的vue-cli上使用它的开发服务器。

<template>
  <section>
    <img v-bind:src="selectedImage" />
  </section>
</template>

<script>
export default {
  data: {
    images: [
      'http://via.placeholder.com/350x150',
      'http://via.placeholder.com/200x140',
      'http://via.placeholder.com/200x100'
    ],
    selectedImage: ''
  },
  created () {
    const idx = Math.floor(Math.random() * this.images.length)
    this.selectedImage = this.images[idx]
  }
}
</script>

编辑：来自main.js

import Vue from 'vue' 
import App from './App' 
import router from './router' 

Vue.config.productionTip = false 
new Vue({ 
    el: '#app', 
    router, 
    template: '<App/>', 
    components: { App } 
})

Answer 1

在组件中，Data应该始终是一个函数

Vue.js随机图像img v-bind

1 个答案: