[英]"TypeError: Cannot read property 'servicios' of undefined" Vue.js + Vuefire
So what i want to do is filter the data retrieved from firebase real time database when user selects a category from a select component and fill the filtered data to another select, filling it with all the data succeds but when i try to filter it based on the selection i get the error: console error所以我想要做的是当用户从一个选择组件中选择一个类别并将过滤后的数据填充到另一个选择时,过滤从 firebase 实时数据库中检索到的数据,用所有数据填充它,但是当我尝试根据我收到错误的选择:控制台错误
Here is my component code:这是我的组件代码:
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard</div>
<div class="card-body">
<h3>Ingresar requerimiento</h3>
<div v-if="user" class="alert alert-success" role="alert">Sesión Iniciada Exitosamente!</div>
CATEGORIA:
<b-form-select v-model="selectedCategory" :options="options" size="sm" class="mt-3"></b-form-select>
<div class="mt-3">Selected: <strong>{{ selectedCategory }}</strong></div>
SOPORTE:
<b-form-select v-model="selectedSoporte" size="sm" class="mt-3">
<option v-for="soporte in ComputedServicios" :value="soporte.nombre" :key="soporte.codigo ">{{ soporte.nombre }}</option>
</b-form-select>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { mapGetters } from "vuex";
import { db } from '../firebase';
import firebase from "firebase";
import {servsRef} from '../firebase'
Vue.use(db)
Vue.use(firebase)
//Vue.use(servsRef)
console.log(db);
export default {
firebase: {
servicios: servsRef
},
computed: {
// map `this.user` to `this.$store.getters.user`
...mapGetters({
user: "user"
}),
ComputedServicios: () => {
//var vm = this;
const data = this.servicios
return data.filter(function (soporte) {
if(soporte.categoria==this.selectedCategory)
return soporte
})
}
},
data() {
return {
// servicios: [],
vm : this,
selectedSoporte:null,
selectedCategory: null,
options: [
{ value: null, text: 'Elija la categoría del soporte' },
{ value: 'electrico', text: 'Eléctrico' },
{ value: 'hidraulico', text: 'Hidráulico' },
{ value: 'electronico', text: 'Electrónico' },
{ value: 'mecanico', text: 'Mecánico'},
{ value: 'neumatico', text: 'Neumático'}
]
}
}
};
</script>
Rewrite ComputedServicios without the arrow function.在没有箭头函数的情况下重写 ComputedServicios。
ComputedServicios() {
return this.servicios.filter(soporte => soporte.categoria == this.selectedCategory)
}
Further reading: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions进一步阅读: https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords.
箭头函数表达式是正则函数表达式的一种语法紧凑的替代方案,尽管它自身没有绑定到 this、arguments、super 或 new.target关键字。 Arrow function expressions are ill suited as methods, and they cannot be used as constructors.
箭头函数表达式不适合作为方法,它们不能用作构造函数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.