javascript - 如何在按钮单击时生成随机项目?
问题描述
我有一个组件,每次访问随机页面时都会生成一个随机项。每次我刷新页面时,都会生成一个新的随机项。每次单击“选择另一个”按钮时,我都想生成一个新的随机项目,但我不完全确定如何做到这一点。任何帮助将不胜感激。
随机的.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
}
}
推荐阅读
- ionic-framework - Ionic 4 拦截 android 后退按钮进行导航
- windows - 将歌曲名称和艺术家添加到文件属性的 Scipt
- spring - 此行为的 Spring 自定义注释
- javascript - Javascript点击功能一次只选择第一个元素或所有元素
- sharepoint - SharePoint:对文件夹和文档集的编程复制/移动操作是否保证是原子的?
- android - Android TextView ellipsize 与 RTL 文本错误
- r - 部分函数保持其签名
- haskell - 在 Haskell 中自动运行单元测试
- javascript - 如何为图像添加上滑动画?
- sql - 使用 SQL 获取累计百分比的起点