Vuejs未定義のプロパティのエラーが、

Question

私はシンプルVueのコンポーネントを持って定義されているだけで、リストサーバ接続データ：このコンポーネントが搭載されているときVuexからserverはすでに定義して行われている

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

、そして私がしようとした場合console.log(this.server)には、正しいURLが表示されます。ある事は、私の計算されたプロパティisHttps次のエラーがスローされます。

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

私はすでにconfigurationまたはdetailsのように、何か他のものにconfigを変更しようとしました、とさえcreatedにmountedを変更しましたが、エラーがポップアップし続けてきました私のテンプレートはで、レンダリングされていません。です。

まず、私はconfigを計算されたプロパティにし始めましたが、エラーはすでに自分のコンソールに届いていました。

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

私は何をすることができます？ところで、このような計算されたプロパティとしてストアを使用した場合も、私の$storeが定義されていないというエラーがスローされますか

Answer 1

計算したisHttpsの矢印機能を使用しています。あなたがcannot read property of undefinedメッセージが表示されますので、その意味で、thisは、windowないVueのインスタンスを参照し、正しいES2015の構文は次のとおりです。

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

もあるべきserver:() => this.$store.state.serverと同じ問題であること：

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