73 lines
1.3 KiB
Vue
73 lines
1.3 KiB
Vue
<template>
|
|
<tr class="billi-primary-50" v-if="edit">
|
|
<td >
|
|
{{item.key}}
|
|
</td>
|
|
|
|
<td >
|
|
<input type="text" v-model="newItem.name" name="key" >
|
|
</td>
|
|
|
|
<td >
|
|
<input type="text" v-model="newItem.description" name="key" >
|
|
</td>
|
|
|
|
<td class="billi-primary"
|
|
@click="toggleEdit"
|
|
><i class="fa-solid fa-floppy-disk"></i></td>
|
|
</tr>
|
|
|
|
<tr v-else>
|
|
<td >{{item.key}}</td>
|
|
<td >{{item.name}}</td>
|
|
<td >{{item.description}}</td>
|
|
<td class="bg-secondary text-white"
|
|
@click="toggleEdit"
|
|
|
|
><i class="fa-solid fa-pen"></i></td>
|
|
</tr>
|
|
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import NameKey from "@/store/classes/NameKey";
|
|
|
|
export default {
|
|
name: "NameKeyListItem",
|
|
data() {
|
|
return {
|
|
edit: false,
|
|
newItem: {},
|
|
}
|
|
},
|
|
props: {
|
|
item: {
|
|
type: NameKey,
|
|
required: true
|
|
},
|
|
storeType: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
methods: {
|
|
toggleEdit() {
|
|
this.edit = !this.edit;
|
|
if(this.edit) {
|
|
this.newItem = {...this.item};
|
|
} else {
|
|
this.$store.dispatch("storeNameKeyObject", {
|
|
storeType: this.storeType,
|
|
item: this.newItem,
|
|
itemOld: this.item
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |