[我正在尝试使用axios和本地json文件从按钮单击中渲染随机数组元素。我想念什么？

Question

现在，我可以按随机顺序渲染整个数组，而不能渲染数组的一个元素。在显示整个json对象而不只是引号的文本时，我也遇到了问题。

这里是html：

<template>
  <div>
    <button v-on:click="getTeacupData">Get Teacup Data</button>
    <!-- <div>{{ teacupDataList }}</div> -->
    <div
      v-for="teacupData in teacupDataList"
      :key="teacupData.quote"
      class="teacup-data"
    >
      <div>
        <span class="quote">
          {{
            teacupDataList[Math.floor(Math.random() * teacupData.quote.length)]
          }}</span
        >
      </div>
    </div>
  </div>
</template>

这是脚本：

<script>
import axios from 'axios'

export default {
  name: 'Teacup',
  data() {
    return {
      teacupDataList: []
    }
  },
  methods: {
    getTeacupData() {
      axios.get('/teacupProph.json').then((response) => {
        this.teacupDataList = response.data
      })
    }
  }
}
</script>

Answer 1

尝试如下访问包含引号文本的属性

  <div>
        <span class="quote">
          {{
            teacupDataList[Math.floor(Math.random() * teacupData.quote.length)].quote
          }}</span
        >