Hey, I'm new to Vue.js and I think I might have made a silly mistake because I just can't figure out why I'm getting this error. Can someone please help me out? Here's the code snippet I'm working with:
const bootstrap = require("./assets/bootstrap.png");
const bulma = require("./assets/bulma.png");
const css3 = require("./assets/css3.png");
const html5 = require("./assets/html5.png");
const illustrator = require("./assets/illustrator.png");
const js = require("./assets/js.png");
const photoshop = require("./assets/photoshop.png");
const vue = require("./assets/vue.png");
const webpack = require("./assets/webpack.png");
export default {
name: "app",
data() {
return {
images: [
bulma,
bootstrap,
css3,
html5,
illustrator,
js,
photoshop,
vue,
webpack
],
idx: Math.floor(Math.random() * this.images.length),
randomImage: this.images[this.idx]
};
}
};
Here's the HTML part of it:
<div id="app">
<div id="myContainer">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view />
<button v-on:click="animate">Test</button>
<img v-for="image in images" :src="image" />
</div>
</div>
I'm encountering this error in my data(): "TypeError: Cannot read property 'length' of undefined" (Vue.js)!!! It seems to be related to Math.floor(Math.random() * this.images.length). My plan is to use randomPicture to generate random pictures in the future.