如何在单击按钮时生成随机项目？

问题描述

我有一个组件，每次访问随机页面时都会生成一个随机项目。每次刷新页面时，都会生成一个新的随机项。我想每次单击“另选一个”按钮时生成一个新的随机项目，但是我不确定如何做到这一点。任何帮助将不胜感激。

Random.vue

<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 lang="ts">
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>

解决方法

您必须添加@click函数和方法

html应该会这样

<a href="" class="btn" @click="generate">Pick another</a>

方法是

methods: {
  generate() {
     //your code
  }
}