Vuejs 정의되지 않은 속성 오류하지만

Question

내가 간단한 뷰 구성 요소가 정의되어 단순히 목록 서버 연결 데이터 :이 구성 요소가 설치 될 때 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이 표시됩니다. 이미 configuration 또는 details처럼, 뭔가 다른 config을 변경하려고, 심지어 created에 mounted을 변경 한

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

하지만 오류가 팝업 유지 : 문제는, 내 계산 재산 isHttps 다음과 같은 오류가 발생한다 내 서식 파일은 이 전혀 렌더링되지 않았습니다..

먼저 config을 계산 된 속성으로 만들기 시작했지만 오류가 이미 내 콘솔로 전달되고 있습니다. 이 같은 계산 된 속성도 없다는 오류가 발생합니다 같은 방법으로 저장소를 사용하여 내 $store 정의되지 않는다 :

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

내가 무엇을 할 수 있습니까?

Answer 1

계산 한 isHttps에 화살표 기능을 사용하고 있습니다.

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

:해야 server:() => this.$store.state.server와 같은 문제도

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

즉 : 그 맥락에서, this 당신이 cannot read property of undefined 메시지를 얻을 수 있도록, 올바른 ES2015 구문은, window하지 뷰의 인스턴스를 참조