Question

我在Nuxtjs中使用vue-isotope，我无权访问filterText数据变量，有人可以帮助我吗？

data: () => ({
  filterText: null,
  option: {
    getFilterData: {
      filterByText: function(itemElem) {
        console.log(this.filterText) // undefined
      }
    }
  }
}

完整代码 https://jsfiddle.net/johanrm/h2ekjcy4/2

Answer 1

您需要保留this函数的data上下文。您必须将相同的this上下文传递给filterByText函数。

Normal function有其自己的this上下文，因此如果使用normal function，则无法使用this访问外部上下文中的对象。

shorthand function或arrow function没有自己的this上下文。在这种情况下，this上下文不会被覆盖，因此您需要使用arrow function来访问父级的this上下文。

尝试下面的代码，看看它是否可以解决您的问题

data() {
    return{
      filterText: "im filter",
      option: {
        getFilterData: {
          filterByText: (itemElem) =>{
            console.log(this.filterText) // im filter
          }
        }
      }
    }
  }

这是javascript的概念，与vue或nuxt无关 This article将使您了解arrow function的含义

我使用Nuxtjs，我无权访问filterText数据变量

1 个答案: