Usage in Vue framework template: passing dynamic data to the property

[au-z]

@smalluban - please feel free to close if you feel this is not the right venue for this question - It has more to do with the interaction between Vue and Hybrids than it does the Hybrids API.

I am having some trouble passing props from vue components to hybrids web components inside a .vue file template.

A brief, very simple example:
https://codesandbox.io/s/vue-hybrids-dynamic-prop-issue-dzis6?file=/src/App.vue

Though I've come to understand that Vue, by default passes props as properties (as opposed to attributes), it appears that this is not the behavior with a hybrids component in a Vue component template (you can see that the fallback attribute value appears to be updating), but the num property inside the component remains 0.

I was wondering if you had any feedback or suggestions on how to work around this problem? Thanks very much!

[smalluban]

One of the design patterns in the hybrids library is using properties over attributes for dynamic values. It really makes sense, as attributes were designed for static HTML files (which basically don't change dynamically). Also, all of the built-in attributes are sync with the corresponding property on the DOM element.

The property factory only callbacks to the value of the attribute when the component is connected to the DOM. You can read more in one of the sections in the docs of the property factory.

As a result, you should notify the Vue template engine, that your intention is to set property, not an attribute. To do that, you can simply add .prop at the end of binding:

<template>
  <div id="app">
    <dynamic-prop-test :num.prop="num"></dynamic-prop-test>
    <br>
    Vue Num: {{num}}
  </div>
</template>

EDIT: Quote from the Vue docs:

Modifiers:

.prop - Bind as a DOM property instead of an attribute (what’s the difference?). If the tag is a > component then .prop will set the property on the component’s $el.

[au-z]

Thanks for the pointer! Now I'm wondering, why Vue doesn't make passing by property instead of attribute the default?

Closing since appending .prop solves the problem.

[smalluban]

I'm surprised as well. For example lit-html or angular template framework uses properties over attributes if they exist on the element's prototype 🤷‍♂️

[au-z]

You may be interested to know that the . character has been added to Vue as a shorthand for .prop in Vue 2.6

Here's the issue where the proposal was introduced:
vuejs/vue#7582

This makes passing props by property much simpler syntactically:

<my-component .my-prop="myValue" ...></my-component>

Edit: I've tried the shorthand syntax but ran into some trouble. I created a Vue issue to track:
vuejs/vue#11375