Problems with composite component about vue-gwt HOT 7 CLOSED

@adrienbaron Thanks! Will try it in the morning.

from vue-gwt.

Hi!

For you first component: BoilingVerdict.html, it must have a single root element (that's a Vue.js constraint), maybe we should fire an error when it's not the case.

First question: You don't have to! This should work just fine:

<div>
    <TemperatureInput scale="c" v-model="celsius" />
    <TemperatureInput scale="f" v-model="fahrenheit" />
    <BoilingVerdict :celsius="celsius" />
</div>

Second question: You also don't have to 😉, just declaring the dependency locally in @Component(components = { BoilingVerdict.class, TemperatureInput.class }) should be enough.

You can change your app class to:

    Vue.attach("#temperatureCalcContainer", TemperatureCalc.class);

If you have other questions you can also ask them on our Gitter: https://gitter.im/Axellience/vue-gwt

from vue-gwt.

@adrienbaron Strange, but I have components = { BoilingVerdict.class, TemperatureInput.class ) in my code, and have to register all components manually anyway.

from vue-gwt.

Oh! I see what's happing, sorry I'm not awake yet ;). So the name in your template is not the name of your java class but that name converted to kebab-case.
See How Is the Component HTML Name Set? in https://axellience.github.io/vue-gwt/introduction/#composing-with-components
So:

<div>
    <temperature-input scale="c" v-model="celsius" />
    <temperature-input scale="f" v-model="fahrenheit" />
    <boiling-verdict :celsius="celsius" />
</div>

from vue-gwt.

@adrienbaron Just checked your proposed solution. It works, and yes, it was HTML naming convention problem.
And I have NOT added single root for BoilingVerdict.html, so not sure "it must have a single root element (that's a Vue.js constraint)" is really mandatory.

from vue-gwt.

@adrienbaron Answering to myself :-) Yes, single root is mandatory, in my case:

<p v-if="parseFloat(celsius) >= 100">The water would boil.</p>
<p v-else>The water would not boil.</p>

works without single root only because one of paragraphs could be visible, not both.
If I add another element, then single root is immediately required, for example:

<div>
  <div>Decision:</div>
  <p v-if="parseFloat(celsius) >= 100">The water would boil.</p>
  <p v-else>The water would not boil.</p>
</div>

from vue-gwt.

Great! Thanks for the details 😊! Closing the issue 😉

from vue-gwt.