テンプレート内のVueディレクティブ

Question

私はvueJsでかなり新しく、タブメニューのようなものを作成しようとしています。 私はドロップダウンのナビゲーションバーを持っており、各リンクは新しいタブを作成し、この新しいタブはVueコンポーネントです。

作成したタブにv-on:clickディレクティブを配置しようとしていますが、この関数は呼び出されません。実際、私は

ようなエラー「プロパティまたはメソッド 『はremoveTabは』インスタンスで定義されたが、 は、レンダリング時に参照されていません。」を取得します

と

"はremoveTabは関数ではありません。"

しかし、removeTabは関数であり、v-on:clickを静的なhtmlタグに入れると機能します。間違ったことをやっているのですか、動的に読み込まれたコンポーネントにディレクティブを持たせることができませんか？

私が説明しようとしていることをより良く示すために、ここでは単純化したコードを示します。 RemoveTabはただのアラートで、いつ動作するのか、動作しないのかを示すだけです。

HTML

<div id="application"> 

    <button class="item" v-on:click="addTab()">Add Button</button> 
    <button class="item" v-on:click="removeTab()">Remove</button> 
    <br><br> 


    <div > 
    <tab v-for ="tab in tabs" :tab="tab"></tab> 
    </div> 
</div> 


<template id="tab-template"> 
    <button class="item"> 
    {{tab.nomeTab}} &nbsp; <div v-on:click="removeTab()">remove</div> 
    </button> 
</template> 

JS

Vue.component('tab', { 
    template: '#tab-template', 
    props: ['tab'] 
}); 

new Vue({ 
    el: '#application', 
    data:{ 
    newTab:'', 
    tabs: [ 
     {nomeTab:'Home', contenutoTab:'ciao'}, 
    ] 
    }, 
    methods:{ 
    addTab: function() { 
     this.tabs.push({ 
     nomeTab: 'NewTab', 
     }); 
    }, 

    removeTab: function() { 
     alert("Here it works"); 
    } 
    } 
}); 

とここではJSFiddleです。

ありがとうございました

Answer 1

@Leoは正しいです。基本的にはあなたの子供のremoveTabメソッドを呼び出そうとしていますが、そのメソッドはあなたの親に定義されています。子は直接親のメソッドにアクセスすることはできません。

例を機能させるには、親がタブを管理している可能性が高いので、タブからイベントを発行し、親のイベントを待ち受けたいと思うでしょう。

<button class="item" v-on:click="$emit('remove-tab')">{{tab.nomeTab}} &nbsp; <div >remove</div></button> 

そして、ここで親テンプレート

<tab v-for ="tab in tabs" :key="tab" :tab="tab" @remove-tab="removeTab"></tab> 

とのあなたfiddleが固定されています。

にはkeyを追加していません。 には常にkeyを使用する必要があります。

Answer 2

Vueには隔離された範囲があります。タブコンポーネントのテンプレートにv-on:click="removeTab()"がありますが、コンポーネント内に定義されていません。