I’ve been experimenting myself with one of the UI components in Vuetify js this week which is chips. The chip (V-chip) component is used to convey small pieces of information and by using close property, the chip becomes interactive and allowing the user interaction. The chips come in four primary variations which are regular, with an icon, with portrait and closeable. For my application, I’ll be using closeable since I want the chip to have a delete function.
Chip component will be used in head judge screen when the user select prize on the fab selector. Prize includes custom prize (type = 0), 1st place ( type = 1), 2nd place (type = 2), 3rd place (type = 3) and special prize (type =4). As I mentioned in one of my posts, the prize is used only in the grand finale. The chip needs to be displayed beside the action fab button when the user clicked on one of the prizes in the fab selector of the action button. The user can select more than one prize, for example, 1st place and special prize at the same time. For that, I have to add one more table for the chip to be displayed beside the action fab when the user selects the prize so that the chip will not overlap with another data table.
At first, I programmed the chip inside the selector because during that time I still want to observe how the chip works where it can be closeable or not. By using close property, the chip can be close but for my case, I want to add delete prize function so that database received delete action as well because close property only happens in javascript not sending anything into the database. close @input=”function” is used to add delete function to the close property at the chip.
Observation (Programmed v-chip inside the selector – not adding the table<td> for the chip yet)
– The chip only appears inside the selector without selecting the prize and it can be closed without adding the delete function.
– The chip will be displayed beside the action fab button when the user clicks back on the fab button after selecting the prize.
– The chip overlapped with another data table.
After the observation, I added <td> for the chip so that it can have its own table, the chip was programmed inside the table. Not to forget, Javascript side need to be modified as well in order to add one more table in the head judge screen using push method: items.push({ text: ‘ prize’, value:’actions’, align:‘center‘}); .
I had faced a problem after I modified my source code which is any chip changes for the first performer in the list, the rest of the performer will follow the first one. As the solution to that problem, I’m using Vue.set so that each performer in the list will not follow the first performer chip changes.
setPrize: function(id,t) {
axios.post(‘/prizes’,{performanceId:id,type:t})
.then(r=> {
this.$set(this.prizes, id, t);
}).catch(function(e){
console.error(“setPrize:” +e)
});
},
0 Comments