javascript - 模板内的Vue指令

我对vueJ还是很陌生，我正在尝试创建诸如选项卡菜单之类的东西。
我有一个下拉导航栏，每个链接都创建一个新选项卡，而该新选项卡是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上。

感谢您的关注

最佳答案

@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添加了v-for。您应始终将key与v-for一起使用。