Mi componente:
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> `, });Se crea en el archivo js, luego lo llamo en un archivo html como:
<product-list :products="products" :maximum-price="maximumPrice"></product-list>el valor de los productos es una matriz de objetos, el precio máximo es 25 (entero), el componente de tarjeta de precio en mi componente de lista de productos solo muestra el valor del artículo.
¿Qué debo hacer para solucionar esto?
la definición de prop debe escribirse en formato camelCase en el componente secundario:
props: ["products", "maximumPrice"],y se usa con el mismo formato en su plantilla:
v-if="item.price <= Number(maximumPrice)"Las variables con guiones no son válidas en js.
Entonces, cuando haces esto: Number(maximum-price)
Se interpreta como Number(maximum 'minus' price) .
Es por eso que tiene este mensaje de error: la Property or method "maximum" is not defined on the instance but referenced during render . Porque está buscando un maximum variable y un price variable.
Lo que puede hacer es cambiar el nombre a maximum_price , por ejemplo.