[15:26] Hussain Mohammad
[{
"color": "purple",
"type": "minivan",
"registration": "2017-01-03T00:00:00.000Z",
"capacity": 7
},
{
"color": "red",
"type": "station wagon",
"registration": "2018-03-03T00:00:00.000Z",
"capacity": 5
},
{
"color": "blue",
"type": "minivan",
"registration": "2017-01-03T00:00:00.000Z",
"capacity": 7
},
{
"color": "green",
"type": "station wagon",
"registration": "2018-03-03T00:00:00.000Z",
"capacity": 5
},
{
"color": "grey",
"type": "minivan",
"registration": "2017-01-03T00:00:00.000Z",
"capacity": 7
},
{
"color": "blue",
"type": "station wagon",
"registration": "2018-03-03T00:00:00.000Z",
"capacity": 5
},
{
"color": "orange",
"type": "minivan",
"registration": "2017-01-03T00:00:00.000Z",
"capacity": 7
},
{
"color": "yellow",
"type": "station wagon",
"registration": "2018-03-03T00:00:00.000Z",
"capacity": 5
},
null,
{
"color": "white",
"type": "station wagon",
"registration": "2018-03-03T00:00:00.000Z",
"capacity": 5
}
] 1)create one textbox should work's like filter or search example user can search color,type or capacity2)use array of object to bind in table or ul-> li with remove car button 3)date format should be simple yyyy-mm-dd4)use color code to add background and text color black5)create a button below of search input with text add new car should work like adding new car https://play.vuejs.org/#eNp9kUFLwzAUx7/KM5cqzBXR0+gGKgP1oKKCl1xG99ZlpklIXuag9Lv7krK5w9it7//7v/SXthP3zo23EcVEVKH2yhEEpOhm0qjWWU/QgccV9LDytoWCq4U00tTWBII2NDBN/LJ4Qq0tfFuvlxfFlTRVORzHB/FA2Dq9IOQJoFrfzLouL/d9VfKUU2VcJNhet3aJeioFcymgZFiVR/tiJCjw61eqGW+CNWzepX0pats6pdG/OVKsJ8UEMklswXa/LzkjH3G0z+s11j8n8k3YpUyKd48B/RalODBa+AZpwPPPV9zx8wGyfdTcPgM/MFgdk+NQe4hmydpHvWz7nL+/Ms1XmO8ITdhfKommZp/7UvA/eTxz9X/d2/Fd3pOmF/0fEx+nNQ==
Vue SFC Playground
[16:18] vamsikrishna-
<template>
<input type="text" v-model="searchQuery" placeholder="search by color">
<ul v-if="!searchQuery">
<li v-for="(item,index) in formattedItems" :key="index" :style="{backgroundColor: item.color}">
<span> <Strong> Type:</Strong>{{ item.type}}</span>
<span> <Strong> Capacity:</Strong>{{ item.capacity}}</span>
<span> <Strong> Registration:</Strong>{{ formatDate(item.registration)}}</span>
<button @click="removeData(index)">CLick</button>
</li>
</ul>
<ul v-else>
<li v-for="(item,index) in filteredItems" :key="index" :style="{backgroundColor: item.color}">
<span> <Strong> Type:</Strong>{{ item.type}}</span>
<span> <Strong> Capacity:</Strong>{{ item.capacity}}</span>
<span> <Strong> Registration:</Strong>{{ formatDate(item.registration)}}</span>
<button @click="removeData(index)">CLick</button>
</li>
</ul>
<button @click="addNewCar">CLick</button>
</template>
<script>
export default {
data(){
return {
dataItems:
[
{
"color": "purple",
"type": "minivan",
"registration": "2017-01-03T00:00:00.000Z",
"capacity": 7
},
{
"color": "red",
"type": "station wagon",
"registration": "2018-03-03T00:00:00.000Z",
"capacity": 5
},
{
"color": "blue",
"type": "minivan",
"registration": "2017-01-03T00:00:00.000Z",
"capacity": 7
},
{
"color": "green",
"type": "station wagon",
"registration": "2018-03-03T00:00:00.000Z",
"capacity": 5
},
{
"color": "grey",
"type": "minivan",
"registration": "2017-01-03T00:00:00.000Z",
"capacity": 7
},
{
"color": "blue",
"type": "station wagon",
"registration": "2018-03-03T00:00:00.000Z",
"capacity": 5
},
{
"color": "orange",
"type": "minivan",
"registration": "2017-01-03T00:00:00.000Z",
"capacity": 7
},
{
"color": "yellow",
"type": "station wagon",
"registration": "2018-03-03T00:00:00.000Z",
"capacity": 5
},
null,
{
"color": "white",
"type": "station wagon",
"registration": "2018-03-03T00:00:00.000Z",
"capacity": 5
}
],
searchQuery:'',
fields:['color','type','registration','capacity'],
};
},
computed:{
filteredItems(){
const query= this.searchQuery.toLowerCase();
let data=this.dataItems.filter(item => item);
return data.filter(item => {
return (
item.color.toLowerCase().includes(query) ||
item.type.toLowerCase().includes(query) ||
String(item.capacity).includes(query)
);
});
},
formattedItems(){
return this.dataItems.filter(item => item);
}
},
methods:{
addNewCar(){
const newcar ={
"color": "white",
"type": "station wagon",
"registration": "2018-03-03T00:00:00.000Z",
"capacity": 5
};
this.dataItems.push(newcar);
},
formatDate(dateString){
const date = new Date(dateString);
return date.toISOString().slice(0,10);
},
removeData(index){
this.dataItems.splice(index,1);
},
}
};
</script>
No comments:
Post a Comment