Question

任何人都知道为什么这对我不起作用？我正在运行vue-cli构建。我没有收到任何错误，但图像没有显示。我是vue.js的新手，所以解决方案很可能非常简单。非常感谢任何帮助...

MenuTableView.RowHeight = UITableView.AutomaticDimension;
MenuTableView.EstimatedRowHeight = 100;

这是我的main.js文件：

<template>
  <section>
    <img :src="selectedImage" />
  </section>
</template>

<script>
export default {
  data: {
    images: [
      '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>

Answer 1

此处data应该是一个返回对象的函数。

<template>
  <section>
    <img :src="selectedImage" />
  </section>
</template>

<script>
export default {
  data () {
    return {
      images: [
        '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>

以下解释为什么数据必须正常运行：https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function

基本上，设计规定data必须是一个返回对象的函数，以避免交叉引用JavaScript对象。

Vue.js随机图像没有显示

1 个答案: