Vuejs nicht definierte Eigenschaft Fehler, aber es ist so definiert

Question

ich eine einfache Vue Komponente, die einfach Listen-Server-Verbindungsdaten:

<template> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-xs-12"> 
     <div class="page-header"> 
      <h2 class="title">Data</h2> 
     </div> 
     <br> 
     </div> 
     <div class="col-xs-12"> 
     <table class="table"> 
      <tr> 
      <td>Server</td> 
      <td><strong>{{config.servers}}</strong></td> 
      </tr> 
      <tr> 
      <td>Port</td> 
      <td><strong>{{config.port}}</strong></td> 
      </tr> 
      <tr> 
      <td>Description</td> 
      <td><strong>{{config.description}}</strong></td> 
      </tr> 
      <tr> 
      <td>Protocol</td> 
      <td :class="{'text-success': isHttps}"> 
       <i v-if="isHttps" class="fa fa-lock"></i> 
       <strong>{{config.scheme}}</strong> 
      </td> 
      </tr> 
     </table> 
     </div> 
    </div> 
    </div> 
</template> 

<script> 
import { mapState } from 'vuex' 

export default { 
    name: 'Application', 

    data() { 
    return { 
     config: { 
     scheme: '', 
     servers: '', 
     port: '', 
     description: '' 
     } 
    } 
    }, 

    computed: { 
    ...mapState(['server']), 

    isHttps:() => this.config.scheme === 'https' 
    }, 

    mounted() { 
    const matched = this.server.match(/(https?):\/\/(.+):(\d+)/) 
    this.config = { 
     scheme: matched[1], 
     servers: matched[2], 
     port: matched[3], 
     description: window.location.hostname.split('.')[0] || 'Server' 
    } 
    } 
} 
</script> 

Die server von Vuex bereits definiert und getan ist, wenn diese Komponente montiert ist, und wenn ich versuche, zu console.log(this.server) zeigt es die richtige URL an. Die Sache ist, meine berechnete Eigenschaft isHttps führt den folgenden Fehler:

[Vue warn]: Error in render function: "TypeError: Cannot read property 'scheme' of undefined" 

found in 

---> <Application> at src/pages/Aplicativo.vue 
     <App> at src/App.vue 
     <Root> 

Ich habe schon versucht, sonst config zu etwas zu ändern, wie configuration oder details und sogar mounted-created geändert, aber der Fehler hält Aufspringen und meine Vorlage ist überhaupt nicht gerendert.

Zuerst fing ich an, config eine berechnete Eigenschaft zu machen, aber der Fehler machte bereits seinen Weg zu meiner Konsole. By the way, mit Speicher als eine berechnete Eigenschaft wie folgt auch eine Fehlermeldung, meine wirft $store ist nicht definiert:

server:() => this.$store.state.server 

Was kann ich tun?

Answer 1

Sie verwenden eine Pfeilfunktion für Ihre isHttps berechnet. In diesem Zusammenhang bezieht sich this auf window nicht der Vue-Instanz, so dass Sie eine cannot read property of undefined Nachricht bekommen, die richtige ES2015 Syntax:

isHttps() { 
    return this.config.scheme === 'https' 
} 

Das ist auch das gleiche Problem mit server:() => this.$store.state.server, die sein sollte:

server() { 
    return this.$store.state.server 
}