Avoid an API call by passing values with props

This commit is contained in:
Bubka
2020-11-26 13:25:46 +01:00
parent 07670d8e56
commit 8a9731c219
2 changed files with 8 additions and 17 deletions

View File

@@ -15,10 +15,12 @@
<div v-if="groups.length > 0"> <div v-if="groups.length > 0">
<div v-for="group in groups" :key="group.id" class="group-item has-text-light is-size-5 is-size-6-mobile"> <div v-for="group in groups" :key="group.id" class="group-item has-text-light is-size-5 is-size-6-mobile">
{{ group.name }} {{ group.name }}
<!-- delete icon -->
<a class="has-text-grey is-pulled-right" @click="deleteGroup(group.id)"> <a class="has-text-grey is-pulled-right" @click="deleteGroup(group.id)">
<font-awesome-icon :icon="['fas', 'trash']" /> <font-awesome-icon :icon="['fas', 'trash']" />
</a> </a>
<router-link :to="{ name: 'editGroup', params: { groupId: group.id }}" class="tag is-dark"> <!-- edit link -->
<router-link :to="{ name: 'editGroup', params: { id: group.id, name: group.name }}" class="tag is-dark">
{{ $t('commons.rename') }} {{ $t('commons.rename') }}
</router-link> </router-link>
<span class="is-family-primary is-size-6 is-size-7-mobile has-text-grey">{{ group.count }} {{ $t('twofaccounts.accounts') }}</span> <span class="is-family-primary is-size-6 is-size-7-mobile has-text-grey">{{ group.count }} {{ $t('twofaccounts.accounts') }}</span>

View File

@@ -21,40 +21,29 @@
export default { export default {
data() { data() {
return { return {
groupExists: false,
form: new Form({ form: new Form({
name: '', name: this.name,
}) })
} }
}, },
created: function() { props: ['id', 'name'],
this.getGroup();
},
methods: { methods: {
async getGroup () {
const { data } = await this.axios.get('/api/groups/' + this.$route.params.groupId)
this.form.fill(data)
this.groupExists = true
},
async updateGroup() { async updateGroup() {
await this.form.put('/api/groups/' + this.$route.params.groupId) await this.form.put('/api/groups/' + this.id)
if( this.form.errors.any() === false ) { if( this.form.errors.any() === false ) {
this.$router.push({name: 'groups', params: { InitialEditMode: true }}) this.$router.push({ name: 'groups' })
} }
}, },
cancelCreation: function() { cancelCreation: function() {
this.$router.push({name: 'groups', params: { InitialEditMode: true }}); this.$router.push({ name: 'groups' });
}, },
}, },