模板

Question

我是vueJs的新手，我正在尝试创建类似标签菜单的东西。 我有一个下拉导航栏，每个链接都会创建一个新选项卡，这个新选项卡是一个Vue组件。

我正在尝试在创建的选项卡中放置v-on:click指令，但它不会调用该函数。事实上，我得到了像

这样的错误

  

＆＃34;财产或方法＆＃34; removeTab＆＃34;没有在实例上定义但是   在渲染期间引用。＆＃34;

和

  

＆＃34; removeTab不是一个函数。＆＃34;

但是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()"，但它未在组件中定义。