Я пытаюсь визуализировать случайный элемент массива из нажатия кнопки, используя ax ios и локальный json файл. Что мне не хватает? - PullRequest
Новая
       6

Я пытаюсь визуализировать случайный элемент массива из нажатия кнопки, используя ax ios и локальный json файл. Что мне не хватает?

0 голосов
/ 01 марта 2020

Теперь у меня есть его, где я могу отобразить весь массив в случайном порядке, просто не могу отобразить один элемент массива. У меня также возникает проблема с отображением всего объекта 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>

1 Ответ

0 голосов
/ 01 марта 2020

Добавьте вычисляемое свойство с именем 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 l oop, просто вызовите вычисленное свойство: 

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

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

  </div>
</template>

Редактировать

поместите файл json в папку компонентов и назовите его как axios('./teacupProph.json') и исправьте @:click в @click, отметьте этот код

...