模板內的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

Vue有孤立的范圍。 您在選項卡組件的模板中有v-on:click="removeTab()" ，但它未在組件中定義。

Answer 2

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

這是你的小提琴修復。

我也沒有為你的v-for添加一把key 。 你應該總是使用v-for的key 。