首页 文章

VueJs计算方法错误：无法读取未定义的属性'words'“？

提问于
浏览 次
1

这是我的伪代码：

var vm = new Vue({
  el: '#test',
  data: {     
    words: [{name:'1'},  {name:'2'}, {name:'3'},{name:'4'},{name:'5'},{name:'6'}],
  },
  computed: {
    paginatedWords: function (words) {
      return vm.words.slice(2, 2);
    }
  }
});

我想只显示 words 的一部分 v-for ，这是Html：

<ul>
  <li v-for="w in paginatedWords"> @{{w.name}} </li>
</ul>

但是控制台给了我这个错误：

渲染函数出错：“TypeError：无法读取未定义的属性'words'”

我究竟做错了什么？

javascript vue.js vuejs2

1 回答

  • 4

    使用 this ，而不是 vm .

    paginatedWords: function () {
  return this.words.slice(2, 2);
}

    此外， slice(2,2) 将返回一个空数组 . 第一个参数是从哪里开始，第二个参数是从哪里开始 . 见slice .

    最后， words 参数被忽略 .

    var vm = new Vue({
  el: '#test',

  data: {
    words: [{
      name: '1'
    }, {
      name: '2'
    }, {
      name: '3'
    }, {
      name: '4'
    }, {
      name: '5'
    }, {
      name: '6'
    }],

  },

  computed: {
    paginatedWords: function() {
      return this.words.slice(2, 4);
    }
  }
});

    <script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="test">
  <ul>
    <li v-for="w in paginatedWords"> {{w.name}} </li>
  </ul>
</div>
    回复于

相关问题