My component:

Vue.component("product-list", {
  props: ["products", "maximum-price"],
  template: `
    <div>
      <div class="row d-flex mb-3 align-items-center p-3 rounded-3 animate__animated animate__fadeInLeft" v-for="(item, index) in products" :key="index" v-if="item.price <= Number(maximum-price)" style="background-color: #e3e3e3">
        <!-- Col-1 -->
        <div class="col-1">
          <button class="btn btn-warning" @click="addItem(item)">Beli</button>
        </div>

        <!-- Col-2 -->
        <div class="col-sm-4">
          <img :src="item.image" :alt="item.name" class="img-fluid d-block" />
        </div>

        <!-- Col-3 -->
        <div class="col">
          <h3 class="text-info">{{ item.name }}</h3>
          <p class="mb-0">{{ item.description }}</p>
          <div class="h5 float-end">
            <price-card :prefix="'$'" :value="item.price" :precision="3"></price-card>
          </div>
        </div>
      </div>
    </div>
  `,
});

It create on js file, then i call it on html file like:

<product-list :products="products" :maximum-price="maximumPrice"></product-list>

products value are object-array, maximumPrice are 25 (integer), price-card component in my product-list component just show the value of item.

What should i do for solve this?

CodePudding user response：

the prop definition should be written in camelCase format in the child component :

 props: ["products", "maximumPrice"],

and used with same format in your template :

 v-if="item.price <= Number(maximumPrice)"

CodePudding user response：

Variables with dashes are invalid in js.

So when you are doing this: Number(maximum-price)

It's interpreted as Number(maximum 'minus' price).

That's why you have this error message: Property or method "maximum" is not defined on the instance but referenced during render. Because it's looking for a variable maximum and a variable price.

What you can do is change the naming to maximum_price for example.