Vue.js - componentsnetの "this"オブジェクトを取得するにはどうすればいいですか？

Question

console.log（これ）doSomthingメソッドでは、 "null"と表示されます。

私は "メイン" 表示されますが、 "この" オブジェクトがnull ..です:(

currentPageにの "メイン" にアクセスする方法は？

<template> 
    <div class="tab_menu_wrap"> 
     <ul class="tab_menu"> 
      <li v-for="tab in tabMenus" v-bind:class="{ active: tab.isActive }" v-on:click="doSomthing"> 
       {{ tab.text }} 
      </li> 
     </ul> 
    </div> 
</template> 

<script> 
    export default { 
     name: 'tab-menu', 
     props: { 

     }, 
     data() { 
      return { 
       currentPage: "main", 
       isActive: true, 
       tabMenus: [ 
        { 
         text: 'A', 
         isActive: true 
        }, 
        { 
         text: 'B', 
         isActive: false 
        }, 
        { 
         text: 'C', 
         isActive: false 
        } 
       ], 
       doSomthing: function(e){ 
        console.log(this) 
       } 
      }; 
     }, 
     method: { 
     }, 
     computed: { 
     } 
    }; 
</script> 

Answer 1

される（this.currentPage）はconsole.log考えます。？

私は、何のアクションをコンポーネントの状態を持つべきではない）（データを考える のように、あなたのコンポーネントのメソッドに、あなたのdoSomethingのを移動してみてください：

<template> 
    <div class="tab_menu_wrap"> 
     <ul class="tab_menu"> 
      <li v-for="tab in tabMenus" v-bind:class="{ active: tab.isActive }" v-on:click="doSomething"> 
       {{ tab.text }} 
      </li> 
     </ul> 
    </div> 
</template> 

<script> 
    export default { 
     name: 'tab-menu', 
     props: { 

     }, 
     data() { 
      return { 
       currentPage: "main", 
       isActive: true, 
       tabMenus: [ 
        { 
         text: 'A', 
         isActive: true 
        }, 
        { 
         text: 'B', 
         isActive: false 
        }, 
        { 
         text: 'C', 
         isActive: false 
        } 
       ] 
      }; 
     }, 
     methods: { 
       doSomething: function(e){ 
        console.log(this) 
       } 
     }, 
     computed: { 
     } 
    }; 
</script>