我有一個組件,每次訪問隨機頁面時都會生成一個隨機項目。每次我刷新頁面時,都會生成一個新的隨機項目。每次單擊“選擇另一個”按鈕時,我都想生成一個新的隨機項目,但我不完全確定如何做到這一點。任何幫助將不勝感激。隨機.view<template> <div class="details" v-for="item in items" v-bind:key="item.id"> <div class="details-primary u-center-text"> <h1 class="heading-secondary">{{item.name}}</h1> <p class="tagline--main">{{item.tagline}}</p> </div> <div class="details-secondary u-margin-top-big"> <div class="info"> <span class="info__detail info--title">Vol</span> <span class="info__detail info--spec">{{item.abv}}%</span> </div> <img class="details-image" :src='item.image_url' alt=""> <div class="info"> <span class="info__detail info--title">Amount</span> <span class="info__detail info--spec">1ltr</span> </div> </div> </div> <div class="rand-gen"> <a href="" class="btn">Pick another</a> </div></template><script>import {Options, Vue} from 'vue-class-component'import axios from 'axios';@Options({ data() { return{ items: [] } }, mounted() { axios.get('https://api.punkapi.com/v2/beers/random') .then(res => this.items = res.data) .catch(err => console.log(err)); }})export default class Random extends Vue {}</script>
如何在單擊按鈕時生成隨機項目?
波斯汪
2023-05-18 09:55:21