Vue-material: Why do u can render a Object in v-for [mdTabs].

[fimars]

I recently started learning vue, I tried to component of the time, I found no way to use v-for the rendering of an Object data, I found your mdTabs components can be done, this is amazing, I checked the information and Read the source code are not the result, I would like to ask about ~

file: src/mdTabs/mdTabs.vue

i try something like function:registerTab, first time it's empty, after the children render, the Object data will be fill, but it can't work. Q _Q

[marcosmoura]

I didn't understand what you're asking. Do you want to create a component aside vue-material? Or do you want to implement mdTabs dynamically with an object as a source?

[fimars]

@marcosmoura yeah, i want to implement mdTabs dynamically with an object as a source.

[marcosmoura]

You can have something like that:

<md-tabs>
  <md-tab v-for="tab in tabs" :md-label="tab.label">
    {{ tab.content }}
  </md-tab>
</md-tabs>

tabs: [
  {
    label: 'Phone',
    content: 'Totam dolorum temporibus cumque nulla praesentium, aliquam earum quas rerum ab blanditiis provident.'
  },
  {
    label: 'Favorites',
    content: 'Maiores consequuntur magnam, error possimus, non qui sed modi iusto sunt.'
  },
  {
    label: 'Near me',
    content: 'Tempore dignissimos veniam iure minus, quidem, est tenetur mollitia similique aspernatur velit.'
  }
]

Please let me know if this works for you.
Thanks.

[fimars]

thanks~ it can work for me.

But I read your source code, I would like to know is that in my component, how can I let my components like you, let an empty Object after adding the content update view, like your components.

your object can work v-for after tab's data adding.

my components also adding data in second time. but my button can't be rendered. 😢

[marcosmoura]

Well. This is pretty much Vue.js logic here. There is no additional secret to make this object for being rendered. Please notice that this do not have any relation with Vue Material.
This object below will work exactly like the last example that I gave to you.

tabs: {
  phone: {
    label: 'Phone',
    content: 'Totam dolorum temporibus cumque nulla praesentium, aliquam earum quas rerum ab blanditiis provident.'
  },
  favorites: {
    label: 'Favorites',
    content: 'Maiores consequuntur magnam, error possimus, non qui sed modi iusto sunt.'
  },
  near_me: {
    label: 'Near me',
    content: 'Tempore dignissimos veniam iure minus, quidem, est tenetur mollitia similique aspernatur velit.'
  }
}

Please let me know if this works for you.
Thanks.

[fimars]

i try it, your last example can work for me. maybe my code have some unknow error, i think it by myself . thank you very much, vue-material is great! 👍