模板中的 Vue 指令答案

【问题标题】：Vue directives inside templates模板中的 Vue 指令
【发布时间】：2017-05-11 14:35:21
【问题描述】：

我对 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>

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。

感谢您的关注

【问题讨论】：

标签： javascript html vue.js vuejs2

【解决方案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 添加到您的v-for。您应该始终使用 key 和 v-for。

【讨论】：

【解决方案2】：

Vue 具有独立的作用域。您的选项卡组件的模板中有v-on:click="removeTab()"，但它没有在组件中定义。

【讨论】：