[英]Error in data(): “TypeError: Cannot read property 'length' of undefined” (Vue.js)
i am a beginner in Vue.js so maybe i made a stupid mistake but i honestly don't understand why do i got such an error... can you help me please? 我是Vue.js的初学者,所以也许我犯了一个愚蠢的错误,但老实说我不明白为什么我会收到这样的错误...您能帮我吗? here is a code: Javascript:
这是一个代码:Javascript:
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]
};
}
};
and HTML: 和HTML:
<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>
Error in data(): "TypeError: Cannot read property 'length' of undefined" (Vue.js)!!! data()中的错误:“ TypeError:无法读取未定义的属性'length'”(Vue.js)! problem is connected with Math.floor(Math.random() * this.images.length) as i understand.
据我了解,问题与Math.floor(Math.random()* this.images.length)有关 。 In future i want to use randomPicture to generate random pictures.
将来我想使用randomPicture生成随机图片。
When you create your component with this : 使用以下命令创建组件时:
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]
};
}
};
this.images
(or this.idx
) is not yet defined. 尚未定义
this.images
(或this.idx
)。 You should set a value (like null
) to randomImage
, then set the actual value on the created
hook : 您应该为
randomImage
设置一个值(如null
),然后在created
钩子上设置实际值:
export default {
name: "app",
data() {
return {
images: [
bulma,
bootstrap,
css3,
html5,
illustrator,
js,
photoshop,
vue,
webpack
],
idx: null,
randomImage: null
};
},
created() {
this.idx = Math.floor(Math.random() * this.images.length)
this.randomImage = this.images[this.idx]
}
};
You can use a computed property instead to data variables like this: 您可以改为使用计算属性来像这样对变量进行数据处理:
export default {
name: "app",
data() {
return {
images: [
bulma,
bootstrap,
css3,
html5,
illustrator,
js,
photoshop,
vue,
webpack
],
};
},
computed: {
idx() {
return Math.floor(Math.random() * this.images.length);
},
randomImage() {
return this.images[this.idx];
},
},
};
Also you can only use the component data variables once the component is created or mounted. 同样,仅在创建或安装组件后才能使用组件数据变量。
装入组件时,您的数据为空(因为您是异步获取的),因此您需要一个额外的保护措施。
Like other answers indicate, this.images is not yet defined when you use it. 像其他答案所示,this.images在使用时尚未定义。 So try this:
所以试试这个:
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() {
const images = [
bulma,
bootstrap,
css3,
html5,
illustrator,
js,
photoshop,
vue,
webpack
]
const idx = Math.floor(Math.random() * images.length)
return {
images,
idx,
randomImage: images[idx]
};
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.