Vue：インスタンススコープ外の関数からVueインスタンスにアクセスする

Question

これはデータオブジェクトの一部です。基本的には、ナビゲーションメニューの作成に使用されます。そのナビゲーションメニューの中には、関数をトリガーするべき特定のボタンがあります。データオブジェクトの中に関数を作成するのがわかりました。なぜなら、これは最も明瞭な方法ですからです。

ただし、thisはvueオブジェクトを返しません。だからグローバルな範囲のVMの部分を作ることとは別に、私はこれをやる方法を失うことになっています。

アイデア？

const data = { 
    login: { 
    title: "Log in", 
    icon: "fa fa-sign-in", 
    action: function() { 
     console.log("Log in"); 
     // This is where I want to access the vm, e.g. like this: 
     // this.$root.showLoginBox(); 
    } 
    } 
} 

Answer 1

Vueインスタンスがそのインスタンスのスコープ外で使用する関数を定義するのは悪い習慣のようです。

しかし、あなたは本当にそれがあなたのdataオブジェクトを保持する必要がある場合は、Vueのインスタンス内から関数にthisをバインドすることができます：あなたのVUEのインスタンス内で

const data = { 
    login: { 
    action: function() { 
     console.log(this) 
    } 
    } 
} 

new Vue({ 
    created() { 
    data.login.action.bind(this)(); 
    } 
}) 

Here's a working codepen.