gpt4 book ai didi

javascript - VueJS 随机数仅生成一次

转载 作者:行者123 更新时间:2023-12-01 03:06:23 24 4
gpt4 key购买 nike

我想制作一个简单的 VueJS 应用程序,能够使用多个 API、抓取图像并将其显示给用户。这是我在观看了一些类(class)视频后第一次尝试使用 Vue,所以如果我不使用 VueJS 功能而是使用纯 JS,请不要恨我。

我希望用户单击一个按钮,然后它会从 API 请求图像。有效的是它随机选择一个 api,但对于 Flickr API,我需要指定一个标签(保存在数组中,也是随机选择的)。但它只选择标签一次,每次我再次调用该函数时,它都是相同的标签!意味着该函数仅在页面重新加载后才会执行。

为什么会这样以及如何解决?提前致谢。

到目前为止我的代码

var vm = new Vue({
el: '#app',
data() {
return {
// some data
apis: [this.flickr(), this.desktopper()],
wallpaper: '',
wallpapers: [],
screenWidth: window.screen.width,
screenHeight: window.screen.height,
}
},
methods: {
// The random function
randomNumber(min, max) {
return Math.floor(Math.random() * (max - min) + min);
},
// The main function, calls an api and should get the image source
requestWallpaper() {
var wallpaper = this.apis[ this.randomNumber(0, this.apis.length) ];
console.log(wallpaper);
},
// Flickr API request random image
flickr() {
// Most popular tags of all time on Flickr (tags are needed to request images)...
var popularTags = ['sunset','beach','water','sky','red','flower','nature','blue','night','white','tree','green','flowers','portrait','art','light','snow','dog','sun','clouds','cat','park','winter','landscape','street','summer','sea','city','trees','yellow','lake','christmas','people','bridge','family','bird','river','pink','house','car','food','bw','old','macro','music','new','moon','orange','garden','blackandwhite'];
// Grab a random tag
var tag = popularTags[ this.randomNumber(0, popularTags.length) ];
return tag;
},
// Desktopper.co API request random image
desktopper() {
return 'desktoppr';
}
}
});

HTML

<body>
<div id="app">
<div>
<div>
<img id="random" src="" />
</div>
<div>
<button v-on:click="requestWallpaper">New Wallpaper</button>
</div>
</div>
</div>
</body>

最佳答案

问题是你的api数组。

apis: [this.flickr(), this.desktopper()],

您正在调用 flickr()desktopper() 方法。这就是括号 () 的含义,这样您就可以将参数传递给该方法。相反,您应该排除括号,以便仅存储对每个方法的引用

apis: [this.flickr, this.desktopper],

然后,当您调用 requestWallpaper() 时,您需要首先获取随机 API,然后从其引用中调用它。

// get a reference to a random API
var api = this.apis[ this.randomNumber(0, this.apis.length) ];
// call that reference, with parenthesis and get the wallpaper result
var wallpaper = api()

关于javascript - VueJS 随机数仅生成一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46145822/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com