根据vuejs中的价格(产品的mrp)对产品进行排序



**示例数据
storeProducts=[
{Pname:'soap',mrp:50},
{Pname:'facewash',mrp:30},
{Pname:'洗发水',mrp:100}
];

**我正试图根据商店产品的价格对产品进行分类,我已经尝试过了,有人能告诉我怎么做吗

<div class="mt-4">
<div class="column" v-if="storeProducts.length !== 0">
<div class="control is-pulled-right">
<div class="select">
<select v-model="sortBy" v-on:change="filteredProduct">
<option value="1">Low to High(Price)</option>
<option value="2">High to Low(Price)</option>
</select>
</div>
</div>
</div>
</section>
</div>
</template>
<script>
export default {
name: 'ProductBySubCategory',
components: {
ProductTile,
},
data() {
return {
products: [],
storeProducts: [],
sortBy: 1,
};
},
methods: {
getRenamedProducts(products) {
return products.map((prod) => {
return {
id: prod.id,
title: prod.title,
mrp: prod.mrp,
realUnit: prod.unit,
};
});
},
},
computed: {
filteredProduct: function () {
return this.storeProducts.sort((a, b) => {
if (this.sortBy == '1') {
return b.mrp - a.mrp;
} else if (this.sortyBy == '2') {
return a.mrp - b.mrp;
}
});
},
},
};
</script>```

试试这个:

filteredProduct: function() {
const sortBy = this.sortBy;
return this.storeProducts.sort((a, b) => {
if (sortBy === '1') {
return b.mrp - a.mrp;
} else if (sortBy === '2') {
return a.mrp - b.mrp;
}
});
}

最新更新