“TypeError：无法读取未定义的属性'servicios'”Vue.js + Vuefire答案

【问题标题】："TypeError: Cannot read property 'servicios' of undefined" Vue.js + Vuefire“TypeError：无法读取未定义的属性'servicios'”Vue.js + Vuefire
【发布时间】：2020-03-09 17:30:40
【问题描述】：

所以我想做的是当用户从选择组件中选择一个类别并将过滤后的数据填充到另一个选择时过滤从firebase实时数据库检索的数据，用所有成功的数据填充它但是当我尝试过滤时它基于选择我得到错误： console error

这是我的组件代码：

<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>

【问题讨论】：

标签： javascript vue.js firebase-realtime-database

【解决方案1】：

重写没有箭头函数的ComputedServicios。

ComputedServicios()  {
    return this.servicios.filter(soporte => soporte.categoria == this.selectedCategory)
}

延伸阅读：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

箭头函数表达式是常规函数表达式的语法紧凑替代方案，虽然没有与 this、arguments、super 或 new.target 关键字的绑定。箭头函数表达式不适合作为方法，也不能用作构造函数。

【讨论】：