This is a migrated thread and some comments may be shown as answers.

How to remove tab by using tabstrip Vue

1 Answer 203 Views
This is a migrated thread and some comments may be shown as answers.
Sio
Top achievements
Rank 1
Sio asked on 03 Dec 2018, 08:22 AM

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.

1 Answer, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 05 Dec 2018, 08:46 AM
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",
      });
    },

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Sio
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Share this question
or