Some components seem to trigger an infinite loop in render function in Vue

[mattrothenberg]

Hey, thanks for building such an awesome project! Stoked that we Vue.js developers can finally take advantage of it.

I ran into the following issue when trying to use the knobs addon.

Assuming I have a template marked up thusly:

<div>{{username}}</div>

And a Vue component with a computed property marked up thusly:

username () {
  return text('Username', 'mattrothenberg')
},

My console inevitably blows up with the following error.

The documentation around Vue.js + Storybook is pretty sparse. Is this the right pattern to be following?

[ndelangen]

I have seen this happen, but I haven't been able to pinpoint why or how this happens.

If someone could help debug this?

🤗

[mattrothenberg]

@ndelangen I'll put together a sample repository :)

[mattrothenberg]

@ndelangen https://github.com/mattrothenberg/storybook-test

As it turns out, I wasn't totally accurate in my initial diagnosis of the problem. I only started seeing the infinite loop error after pulling in a particular component from my favorite Vue UI library, Element UI.

It appears that simply adding this particular component to the template causes the error. Note that this component isn't hooked up to any particular knob, but its very presence on the page triggers the issue.

<el-select v-model="value" placeholder="Select">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

Test Repository -> Component in Question

Source code of el-select

Video demonstrating the error

Let me know if that helps!

[rndmerle]

Are you sure you still don't have a addDecorator(withKnobs) in config.js ?
Because I have that kind of loop with md-menu component from vue-material lib, but it's totally linked to the inclusion of the knobs decorator.

[mattrothenberg]

@rndmerle You're right, removing that addDecorator "resolves" the issue I articulated.

[ndelangen]

I know @kazupon added some code to make addDecorator work for vue?

What could cause an infinite render in Vue?