search

vue-bulma / tabs

Tabs Component for Vue Bulma
MIT License
41 stars 38 forks source link

data sync not working #1

Closed martinhearn closed 7 years ago

martinhearn commented 8 years ago

If I dynamically generate some tab-panes like:

<tabs layout="left" :only-fade="false">
  <tab-pane v-for="item in items" :label.sync="item.header">
    {{item.description}}
  </tab-pane>
</tabs>

and then later refresh items array using Ajax - the components do not get updated (in fact the content all disappears).

If I empty the contents of items (this.$set('items', [])) before refreshing with Ajax the component refreshes successfully as expected.

Any ideas?

Thanks!

fundon commented 8 years ago

@martinhearn Sorry, reply too later.

Currently, tabs supports Vue 2.0. If your data's type is Array, this.items = [] or this.$set('items', []) is not reactive. See http://rc.vuejs.org/guide/reactivity.html or http://vuejs.org/guide/reactivity.html.

There is an example https://github.com/fundon/vue-admin/blob/next/client/views/components/Tabs.vue#L135-L170, maybe can help you.

fundon commented 7 years ago

See http://vue-admin.fundon.me/#/components/tabs.