Question

这是我的伪代码：

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：无法读取属性'字' 未定义“

我做错了什么？

Answer 1

使用this，而不是vm。

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

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

最后，忽略words参数。

＆＃13;

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);
    }
  }
});

＆＃13;

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

＆＃13;

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

1 个答案: