jQuery複数要素UIラベルタブプラグイン

js 代

<script type="text/javascript" src="js/vue.min.js"></script>
<script src="js/element.min.js"></script>
<スクリプトタイプ="text/javascript">
新しい Vue({
el: '#myVue',
データ（） {
戻る {
activeName: '2番目',
activeName2: '最初',
tabPosition: 'トップ'、
editableTabsValue2: '2',
editableTabs2: [{
タイトル: 'タブ 1'、
名前: '1'、
内容: 'タブ 1 の内容'
}、{
タイトル: 「タブ 2」、
名前: '2'、
コンテンツ: 'タブ 2 コンテンツ'
}]、
タブインデックス: 2
}
}、
メソッド: {
handleClick(タブ、イベント) {
console.log(タブ、イベント);
}、
addTab(ターゲット名) {
let newTabName = ++this.tabIndex + '';
this.editableTabs2.push({
タイトル: 「新しいタブ」、
名前: 新しいタブ名、
コンテンツ: 「新しいタブのコンテンツ」
});
this.editableTabsValue2 = 新しいタブ名;
}、
RemoveTab(ターゲット名) {
let tabs = this.editableTabs2;
activeName = this.editableTabsValue2 にします;
if(アクティブ名 === ターゲット名) {
tabs.forEach((タブ, インデックス) => {
if(tab.name === ターゲット名) {
nextTab = タブ[インデックス + 1] || とします。タブ[インデックス - 1];
if(nextTab) {
activeName = nextTab.name;
}
}
});
}

this.editableTabsValue2 = activeName;
this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
}
}
})
</script>