VueJs component template v-bind class as parameter

2

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?

    
asked by fredyfx 03.01.2019 в 23:34
source

1 answer

2

I share the solution for those who have the same problem.

Replace:

v-bind:cssclass="fx-display-board__item"

By:

v-bind:cssclass="'fx-display-board__item'"

Note the single quotes inside the double quotes for the class name.

Conversing with the good @gbianchi, the solution was even simpler!

Component:

Vue.component("product-card", {
  props: ["title", "price", "url", "sku", "retina", "image"],
    template: '<a 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 in HTML:

<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)"
      class="fx-display-board__item"
      v-bind:price="product.Price"
 ></product-card>
    
answered by 03.01.2019 / 23:34
source