How to remove tab by using tabstrip Vue

[Sio]

https://codesandbox.io/s/216z33wvjr

this is the link that show the reason of i am asking this question, seem like Vue kendo not have the function of remove and add the tab, i m using jquery and use it to add and remove the tab. Add the tab is easy but when i need to remove the tab, the fuction that i defined on the "x" seem like cannot fire the "remove" function i had create in the method of vue, seem like it was not found the method.

[Veselin Tsvetanov]

Hello Sio,

In order to achieve the desired add / remove functionality, you will need to approach the discussed case in a slightly different manner:

- First of all, you will have to initialize the TabStrip as a Vue component in order to be able to change its state from the Vue app itself:

<kendo-tabstrip
        ref="tabStrip"
        v-show="visibleTabStrip"
        v-on:select="onTabStripSelect"
        :data-source="localDataSource"
        :data-text-field="'text'"
        :data-content-field="'content'"
        :data-image-url-field="'mageUrl'">
</kendo-tabstrip>

Initially the TabStrip will be hidden (v-show="visibleTabStrip"). Also, the above should use a DataSource, which will allow the Vue app to alter the state of the items.

- Then you will need to attach a click event to a TabStrip wrapper element:

<div v-on:click="onClick">
  <kendo-tabstrip
        ref="tabStrip"
...

- As you have done, in the mounted method I assign a reference to the TabStrip widget to a variable in the Vue app:

mounted: function() {
  this.tabStrip = this.$refs.tabStrip.kendoWidget();
}

- In this case to add an item in the TabStrip you will have the following implementation:

onSelect: function(val) {
      this.visibleTabStrip = true;

      this.localDataSource.push({
        text: $(val.item).text(),
        content: "test",
        mageUrl: "https://demos.telerik.com/kendo-ui/content/shared/icons/sports/golf.png"
      });
    },

Note the imageUrl field, which should point to an image to be placed within the tab item. That image should be the cross sign, which would remove the tab.

- To remove a tab, use the v-on:click event attached on the TabStrip parent element:

  onClick: function(e) {
    var target = kendo.jQuery(e.target);

    if (target.hasClass("k-image")) {
      var index = target.closest(".k-item").index();
      this.localDataSource.splice(index, 1);
    }
  }
},

Here you will find a modified version of the sample sent implementing the above suggestions.

Regards,
Veselin Tsvetanov
Progress Telerik