数组的 slice() 方法执行成功，但却报错

Question

在我的 Vue 项目中，使用 slice() 数组方法，执行成功的都了想要的数组，但是却报类型错误。

代码:

props: [
      'books'
    ],
    computed: {
      sixBookList() {
        return this.books.bookList.slice(0, 6);
      }
    }

错误信息：

TypeError: Cannot read property 'slice' of undefined

不知是怎么回事？

Answer 1

我上次也是出现这样的情况，给它加一个判断试试，
if(this.books.bookList){

         return this.books.bookList.slice(0, 6);                   
             }

Answer 2

应该是你在刚进来还没有给bookList赋值的时候就执行了这段代码,导致出现了报错,可以选择前面加判断或者就是设置该值的默认值

Answer 3

对于通过props传进来的参数，vue不建议直接改变父组件的数据，这样会破坏单向数据流的特性。

如果需要对传进来的参数进行操作，可以先在data里定义一个变量，在watch里监听参数，当参数的值不为空时，赋给data中定义的变量，之后操作的只是data里的这个变量而已。

如果还需要修改父组件的props，直接通过emit传出去，让父组件自己修改，改好了再传进子组件。