I have a very rare situation, where the documentation that mentions the error: link I'm not being useful or I'm not understanding how it's supposed to be.
Without more details to add for now, let's go to the code:
Component:
Vue.component("product-card", {
props: ["title", "price", "url", "sku", "retina", "image", "cssclass"],
template: '<a v-bind:class="cssclass" v-bind:href= "url">
<img
v-bind:alt = "title"
v-bind:src = "image"
v-bind:srcset = "retina"
/>
<h3 class = "fx-product-carousel-cell__title">
{{title}}
</h3>
<div class = "fx-price" > {{price}} </div>
</a>'
});
Use of the component:
<product-card v-for="product in introductionProducts"
v-bind:key="product.ProductCode"
v-bind:title="product.Name"
v-bind:url="getURL(product.ProductCode)"
v-bind:image="getSrc(product.ProductCode)"
v-bind:retina="getRetina(product.ProductCode)"
v-bind:cssclass="fx-display-board__item"
v-bind:price="product.Price"
></product-card>
And I get the error:
[Vue warn]: Property or method "fx" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in <Root>) vue.js:597:7
[Vue warn]: Property or method "display" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in <Root>) vue.js:597:7
[Vue warn]: Property or method "board__item" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in <Root>) vue.js:597:7
[Vue warn]: Property or method "fx" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in <Root>) vue.js:597:7
[Vue warn]: Property or method "display" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in <Root>) vue.js:597:7
[Vue warn]: Property or method "board__item" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in <Root>) vue.js:597:7
[Vue warn]: Property or method "fx" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in <Root>) vue.js:597:7
[Vue warn]: Property or method "display" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in <Root>) vue.js:597:7
[Vue warn]: Property or method "board__item" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in <Root>) vue.js:597:7
[Vue warn]: Property or method "fx" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in <Root>) vue.js:597:7
[Vue warn]: Property or method "display" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in <Root>) vue.js:597:7
[Vue warn]: Property or method "board__item" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in <Root>) vue.js:597:7
Solution attempts:
It occurred to me that maybe the problem comes with the name of the class, yes, because of the scripts, so I replaced the name of the class with
v-bind:cssclass="fxdisplayboarditem"
No, it did not work.
If the cssclass property moved it statically to the template of the component, staying:
<a class="fx-display-board__item" v-bind:href= "url">
Previously being:
<a v-bind:class="cssclass" v-bind:href= "url">
It works, however, what is the goal of creating a component? Make it re-usable ... Ideas?