I have successfully implemented Vue.js version 3 in my project. The code below showcases a fully functional setup using dummy data, options API with filters and sorting:
<template>
<h5>List of Products</h5>
<h3>Filter</h3>
<button v-on:click="resetOptions">Reset</button>
<button v-on:click="sorting">Sorting</button>
<button v-on:click="sorting2">Sorting2</button>
<select v-model="category">
<option value="Accessories">Accessories</option>
<option value="Laptop">Laptop</option>
<option value="Stationary">Stationary</option>
</select>
<div>
<input type="checkbox" name="test" id="test" v-model="city" value='Roma' />
<label for="test"> Roma</label>
<input type="checkbox" name="test2" id="test2" v-model.trim="city" value='Barselona' />
<label for="test2"> Barselona</label>
<input type="checkbox" name="test3" id="test3" v-model.trim="city" value='Milano' />
<label for="test3"> Milano</label>
</div>
<!-- <select v-model="city">
<option value="Barselona">Barselona</option>
<option value="Roma"> Roma </option>
<option value="Milano">Milano</option>
</select> -->
<input type="text" v-model="name" placeholder="Filter By Name"/>
<label for="vol">Price (between 0 and 1000):</label>
<input type="range" v-model.trim="range" min="0" max="1000" step="10"/>
<ul>
<li v-for="product in filterProducts" :key="product.name"> Product Name : {{product.name}} - Price : {{product.price}} ({{product.category}})
{{product.city}}
</li>
</ul>
</template>
<script>
import getPosts from '../composables/getPosts'
export default {
data: ()=> ( {
city:['Roma', 'Barselona', 'Milano'],
category: '',
name: '',
range: '10000',
products: [
{ name: "Keyboard", price: 44, category: 'Accessories', city:'Roma'},
{ name: "Mouse", price: 20, category: 'Accessories', city:'Barselona'},
{ name: "Monitor", price: 399, category: 'Accessories', city:'Roma'},
{ name: "Dell XPS", price: 599, category: 'Laptop', city:'Roma'},
{ name: "MacBook Pro", price: 899, category: 'Laptop', city:'Roma'},
{ name: "Pencil Box", price: 6, category: 'Stationary', city:'Barselona'},
{ name: "Pen", price: 2, category: 'Stationary', city:'Milano'},
{ name: "USB Cable", price: 7, category: 'Accessories', city:'Milano'},
{ name: "Eraser", price: 2, category: 'Stationary', city:'Roma'},
{ name: "Highlighter", price: 5, category: 'Stationary', city:'Roma'}
]
}),
computed: {
filterProducts: function(){
return this.filterProductsByName(this.filterProductsByRange(this.filterProductsByCity(this.filterProductsByCateg ory(this.products))))
},
},
methods: {
filterProductsByCategory: function(products){
return products.filter(product => !product.category.indexOf(this.category))
},
filterProductsByName: function(products) {
return products.filter(product => !product.name.toLowerCase().indexOf(this.name.toLowerCase()))
},
filterProductsByCity: function(products) {
return products.filter(product => this.city.indexOf(product.city) !== -1)
},
filterProductsByCity2: function(products) {
return products.filter(product => !product.city.indexOf(this.city))
},
filterProductsByRange: function(products){
return products.filter(product => (product.price >= 0 && product.price <= this.range) ? product : '')
},
sorting:function(){
this.products.sort((a,b)=>(a.price > b.price) ? 1 : -1)
},
sorting2:function(){
this.products.sort((a,b)=>(a.price < b.price) ? 1 : -1)
},
uniqueCheck(e){
this.city = [];
if (e.target.checked) {
this.city.push(e.target.value);
}
},
resetOptions:function(){
this.category='',
this.city='',
this.name='',
this.range='1000'
},
},
}
</script>
<style>
</style>
However, I now wish to transition to the Composition API by implementing a fake API call using mock data. I encountered some issues while converting functions from Options API to Composition API in the filtering logic. Here is a snippet of the transformed code:
<template>
<div class='home'>
<h1>Third</h1>
<select v-model="category">
<option value="Accessories">Accessories</option>
<option value="Laptop">Laptop</option>
<option value="Stationary">Stationary</option>
</select>
<div>
<input type="checkbox" name="test" id="test" v-model="city" value='Roma' />
<label for="test"> Roma</label>
</div>
<div v-if="error"> {{error}} </div>
<div v-if="products.length">
<div v-for="product in filterProducts" :key='product.price'>
<h3>{{product.name }}</h3>
<h4>{{product.category}}</h4>
</div>
</div>
<div v-else> Loading...</div>
</div>
</template>
<script>
import { computed, ref} from 'vue'
import getProducts from '../composables/getProducts'
export default {
components: {} ,
setup(){
const category = ref('')
const city = ref('')
const{products,error,load} = getProducts()
load()
function filterProductsByCategory (products){
return products.filter(product => !product.category.indexOf(category.value))
}
function filterProductsByCity (products) {
return products.filter(product => city.value.indexOf(product.city) !== -1)
}
const filterProducts = computed (()=> {
return filterProductsByCity.value(filterProductsByCategory.value(products.value))**
})
return {products, error, category, city, filterProducts, filterProductsByCity, filterProductsByCategory}
}
}
</script>
<style>
</style>
I believe the issue lies within the filter functions. I have made necessary changes to convert from the Options API to the Composition API, but further assistance is required to resolve the problems in the filtering logic.
If someone could provide guidance on this matter, I can easily convert the entire codebase to utilize the Composition API seamlessly.