我试图通过使用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

添加名为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>

在模板中，不要使用v-for循环，只需调用计算的属性：

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

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

  </div>
</template>

编辑

将json文件放在components文件夹中，并像axios('./teacupProph.json')一样调用它，并将@:click修复为@click，检查这个代码