Javascript 我试图使用axios和本地json文件从按钮单击中呈现一个随机数组元素。我错过了什么？

我现在可以以随机顺序渲染整个数组，但不能渲染数组中的一个元素。在显示整个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>

获取茶杯数据
{{
teacupDataList[Math.floor（Math.random（）*teacupData.quote.length）]
}}

下面是脚本：

<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>

从“axios”导入axios
导出默认值{
名称：“茶杯”，
数据（）{
返回{
茶杯数据列表：[]
}
},
方法：{
getteacupdatea（）{
get（'/teacupProph.json'）。然后（（响应）=>{
this.teacupDataList=response.data
})
}
}
}

添加一个名为

randomQuote

的计算属性，如下所示：

<script>
import axios from 'axios'

export default {
  name: 'Teacup',
  data() {
    return {
      teacupDataList: []
    }
  },
 computed:{
  randomQuote(){
  const rand=Math.floor(Math.random() * this.teacupDataList.length)
     return this.teacupDataList[rand]?this.teacupDataList[rand].quote:""
   }
  },
  methods: {
    getTeacupData() {
      axios.get('/teacupProph.json').then((response) => {
        this.teacupDataList = response.data
      })
    }
  }
}
</script>

编辑

---

将您的json文件放入components文件夹中，将其命名为axios（'./teacupProph.json'），并修复

@：单击

至

@单击

，选中此项

我正在获取teacupData，而teacupDataList未定义在他们面前使用此项，如

此项。teacupDataList

检查我编辑的答案我现在正在获取。。。。此错误无法读取UndefinedJSON对象的属性'quote'，json对象的设置如下：[{“quote”：热狗很棒，“id”：“1”}，{“quote”：“如果你是热狗，你会吃自己吗？”，“id”：“2”}]如果我们设置

let rand=Math.floor（Math.random（）*this.teacupData.quote.length），这应该可以工作返回此.teacupDataList[rand]？此.teacupDataList[rand]。引号：“

<template>
  <div>
    <button v-on:click="getTeacupData">Get Teacup Data</button>
    <!-- <div>{{ teacupDataList }}</div> -->

      <div>
        <span class="quote">
          {{
            randomQuote
          }}</span>
      </div>

  </div>
</template>