Question

我正在努力向列表页面添加分页功能，但这不是问题。问题是，每次我尝试使用this关键字来获取数据实例的属性值时，都会在getPageToShow（）方法中获取undefined之类的console.log("object=======>", this.currentPage); // undefined的值，并且数据实例本身内部的disable: this.currentPage === 1似乎未返回预期值。但是我可以访问模板中的所有这些数据属性值。

我尝试使用created和mounted生命周期实例只是为了确认该组件没有在数据绑定之前呈现，而无济于事。

这是我的代码；

export default {
    name: "Pagination",
    data() {
        return {
            pageToShow: this.getPageToShow(),
            currentPage: null,
            disable: this.currentPage === 1
        };
    },
    mounted() {
        this.currentPage = this.$store.state.currentPage;
    },
    methods: {
        getPageToShow(num) {
            console.log("object=======>", this.currentPage, this.disable);
            this.$store.commit(Types.UPDATE_PAGETOSHOW, num);
            return this.$store.state.pageToShow;
        }
    }
};

这就是我使用模板中数据的方式，并且工作正常。

<template>
 <div>
  <button
    class="fl dib link dim black f5 b pa2 bg-white ba bw0"
    :style="disable && { cursor: 'not-allowed' }"
    title="Previous"
    :disabled="disable"
    tabindex="-1"
  >
    &larr; Previous
  </button>
 </div>
</template>

我尝试过console.log(this)可以在其中看到那些属性，但是this关键字似乎不在Vue实例中获取它们。我希望例如console.log("object=======>", this.currentPage, this.disable)返回的实际值不是// undefined, undefined。谢谢

无法使用“ this”关键字访问Vuejs数据/方法/ lifeCycle实例中的数据

0 个答案: