Question

我正在尝试使用Vuex和Vuetify为搜索框异步填充下拉列表（https://vuetifyjs.com/components/selects）。我的问题是我无法使用method（）访问$ store，当然只能使用computed（）。

以下是我的吸气者/州：

loadedTours:Array[9]
0:Object
1:Object
2:Object
3:Object
4:Object
5:Object
6:Object
7:Object
8:Object
9:Object

可以使用计算（）

中的v-for返回

tours () {
    return this.$store.getters.loadedTours
},

这是一个方法（），只有当列表在data（）中时才有效：

methods: {
    querySelections (v) {
        this.loading = true
            setTimeout(() => {
                this.items = this.tours.filter(e => {
                    return (e || '').toLowerCase().indexOf((v || '').toLowerCase()) > -1
                })
            this.loading = false
        }, 500)
    }
}

结果应返回每个对象中列出的旅游标题。

目前的解决方案：

添加了created（）：

created () {
    this.loadedTours = this.$store.getters.loadedTours
},

将method（）更改为：

querySelections (v) {
    let that = this; 
    setTimeout(() => {
        that.items = that.loadedTours
    }, 500)
}

删除了data属性中的箭头函数。

现在需要返回tourTitle，然后按输入过滤。

Answer 1

除了我在评论中提到的内容之外，您的主要错误可能是因为您在箭头函数中使用this，因为this将不会引用正确的（vuejs）上下文，< / p>

来自documentation：

请注意，您不应将箭头函数与data属性一起使用（例如data：（）=＆gt; {return {a：this.myProp}}）。原因是箭头函数绑定了父上下文，因此这不是您期望的Vue实例，并且this.myProp将是未定义的。

而是做这样的事情：

  let that = this; 
  setTimeout(() => callback(that.name), 15);

现在，that将引用vuejs this object

在组件方法（）中访问Vuex $ store.getters

1 个答案: