Question

数据（）中的错误：“TypeError：无法读取未定义的属性‘length’”（Vue.js）

2019-03-12

5404

javascript arrays image vue.js v-for

我是 Vue.js 的初学者，所以也许我犯了一个愚蠢的错误，但老实说，我不明白为什么我会得到这样的错误...... 你能帮我吗？这里有一个代码： 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]
    };
  }
};

和 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>

data() 中的错误：“TypeError：无法读取未定义的属性‘length’”（Vue.js）！！！据我所知，问题与 Math.floor(Math.random() * this.images.length) 有关。将来我想使用 randomPicture 来生成随机图片。

Answer 1

当您使用此组件创建组件时：

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 （或 this.idx ）尚未定义。您应该为 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]
  }
};

Answer 2

您可以改用计算属性来像这样的数据变量：

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];
    },
  },
};

此外，您只能在创建或安装组件后使用组件数据变量。

Answer 3

当组件被挂载时你的数据是空的（因为你是异步获取的），所以你需要一个额外的保护。

Dhairya Senjaliya

2019-03-12