Question

我想创建一个简单的VueJS应用程序，它能够使用多个API，抓取图像并将其显示给用户。这是我在观看一些课程视频后第一次尝试使用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>

Answer 1

问题是你是apis数组。

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()

VueJS随机数只生成一次

1 个答案: