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

Question

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

随机.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>

Answer 1

你必须添加@click功能和方法html应该是这样的<a href="" class="btn" @click="generate">Pick another</a>方法是methods: {&nbsp; generate() {&nbsp; &nbsp; &nbsp;//your code&nbsp; }}