Vue.js - コンポーネントメソッドで小道具が定義されていません

Question

Vue.jsをDjangoプロジェクト（複数ページアプリケーション）に統合しようとしています。

開始するログアウトのルートにPOSTする単純なログアウトコンポーネントを作成しようとしています。ルートのエンドポイントは、Djangoのurlテンプレートタグに由来します。

エンドポイントプロップはコンポーネントメソッド内でundefinedです。コンポーネントテンプレート内で使用できますが。私は間違って何をしていますか？

---

ジャンゴテンプレート

<div id="logout"> 
    <logout endpoint="{% url 'account_logout' %}" 
      csrf_token="{{ csrf_token }}"></logout> 
</div> 
{% render_bundle 'logout' %} 

logout.js

import Vue from 'vue' 
import Logout from './Logout.vue' 


new Vue({ 
    el: '#logout', 

    components: { 
     Logout 
    } 
}); 

Logout.vue

<template> 
    <div> 
     <span class="logout-link" 
       @click="performLogout"> 

      Logout 
     </span> 
    </div> 
</template> 


<script> 
    export default { 
     name: 'logout', 

     props: [ 
      'csrf_token', 
      'endpoint' 
     ], 

     data() { 
      return { 
      } 
     }, 

     methods: { 
      performLogout: event => { 
       console.log(`Endpoint: ${this.endpoint}`); // <-- undefined 
       // this.$http.post(this.endpoint); 
      } 
     } 
    } 
</script> 


<style> 
    .logout-link { 
     padding: 3px 20px; 
     cursor: pointer; 
    } 
</style> 

Answer 1

thisの有効範囲の問題があります。

thisは、vueインスタンスを指していません。そのため、this.endpointを使用してendpoint小道具にアクセスすることはできません。

はこのようにそれを試してみてください。

methods: { 
    performLogout(event) { 
     console.log(`Endpoint: ${this.endpoint}`); 
       // this.$http.post(this.endpoint); 
    } 
}