#vue.js #vuex
Вопрос:
Всякий раз, когда я сохраняю первый товар в своем магазине, он не отображается во внешнем интерфейсе, только мои кнопки. После добавления первой строки и обновления я могу добавить еще несколько строк, которые действительно отображаются. Я попытался создать clientIndex, потому что подумал, что, возможно, он не обновлялся из-за «field.id», но это ничего не изменило.
Кто-нибудь может сказать, что я могу сделать, чтобы это исправить?
Мой index.js
state: { clientfields: [], clients: [], }, mutations: { setClientFields(state, fields) { state.clientfields = fields; }, setClients(state, clients) { state.clients = clients; }, deleteClient(state, client) { state.clients.splice(state.clients.indexOf(client), 1); }, addClient(state, client) { state.clients.unshift(client); }, actions: { fetchClients({ state, commit }) { axios.get('http://localhost:8000/api/clients') .then(response =gt; { console.log(response.data.data); commit("setClients", response.data.data) commit("setClientFields", Object.keys(state.clients[0])) console.log(Object.keys(state.clients)); }) }, deleteClient({ commit }, clientdata) { axios.delete("http://localhost:8000/api/clients/" clientdata.id) commit("deleteClient", clientdata) }, saveClient({ commit }, clientdata) { let promise; if (clientdata.id != null) { promise = axios.put("http://localhost:8000/api/clients/" clientdata.id, clientdata) console.log(clientdata) } else { console.log(clientdata) promise = axios.post("http://localhost:8000/api/clients/", clientdata) } promise.then(function (response) { if (clientdata.id != null) { commit("saveClient", clientdata) } else { commit("addClient", response.data.data) } }) .catch(function (error) { console.log(error.response); commit('error', error.response) }) }, }
Мой Компонент
lt;templategt; lt;div class="app" gt; lt;v-btn tile elevation="4" style="margin-left: 20px margin-top: 20px;" v-if="! showEdit" class="btn btn-blue left" v-on:click="saveClient"gt;Nieuwe Clientlt;/v-btngt; lt;table class="table-auto"gt; lt;theadgt; lt;tr class="md:border-t-2 border-collapse border border-gray-600 ..."gt; lt;th class="px-4 py-2 "gt;Editlt;/thgt; lt;th class="px-4 py-2 "gt;Deletelt;/thgt; lt;th class="px-4 py-2 allow-overflow" v-for="field in fields" :key="field.id"gt;{{ field.replace("_"," ") }}lt;/thgt; lt;/trgt; lt;/theadgt; lt;tr class="md:border-t-2 border-collapse border border-gray-600 ..." v-for='(clientdata, clientIndex) in clients' :key="clientIndex"gt; lt;td class="px-4 py-2 font-medium"gt; lt;v-btn class="ocz" v-on:click="updClient(clientdata)"gt; Edit lt;/v-btngt; lt;/tdgt; lt;td class="px-4 py-2 font-medium"gt; lt;templategt; lt;v-dialog v-model="confirm" width="350" gt; lt;template v-slot:activator="{ on, attrs }"gt; lt;v-btn color="red" v-bind="attrs" v-on="on" gt; Delete lt;/v-btngt; lt;/templategt; lt;v-cardgt; lt;v-card-title class="text-h5"gt; ARE YOU SURE YOU lt;brgt; WANT TO DELETE THIS? lt;/v-card-titlegt; lt;v-card-actionsgt; lt;v-btn color="grey" text @click="confirm = false" gt; Cancel lt;/v-btngt; lt;v-btn color="red" text @click="delClient(clientdata); confirm = false;" gt; Delete lt;/v-btngt; lt;/v-card-actionsgt; lt;/v-cardgt; lt;/v-dialoggt; lt;/templategt; lt;/tdgt; lt;td class="px-4 py-2 font-medium" v-for="field in fields" :key="field.id"gt;{{ clientdata[field] }}lt;/tdgt; lt;/trgt; lt;tr v-if="!clients.length" gt; lt;td class="px-4 py-2 font-medium" style="opacity: 0.6;"gt;No data to be shown.lt;/tdgt; lt;/trgt; lt;/tablegt; lt;transition name="fade"gt; lt;div class="modal" v-if="dialog"gt; lt;div class="modal-content"gt; lt;EditModal :client="selClient" v-show="showEdit" @close="closeEdit"/gt; lt;/divgt; lt;/divgt; lt;/transitiongt; lt;/divgt; lt;/templategt; lt;scriptgt; import EditModal from '@/components/Clients/EditClients.vue' export default{ dialog: false, overlay: true, components: { EditModal, }, data () { return { selClient: {}, showEdit: false, confirm: false, clientIndex: 100, } }, created () { this.$store.dispatch('fetchClients') }, computed: { clients() { return this.$store.state.clients; }, fields() { return this.$store.state.clientfields; } }, methods: { closeEdit: function() { this.showEdit = false; this.dialog = false; }, delClient: function(clientdata) { this.clientIndex--; this.$store.dispatch('deleteClient', clientdata) }, updClient: function(clientdata) { this.selClient = clientdata; this.showEdit = true; this.dialog = true; this.clientIndex ; this.$store.dispatch('saveClient', clientdata) }, saveClient: function(clientdata) { this.showEdit = true; this.dialog = true this.clientIndex ; this.$store.dispatch('saveClient', clientdata); }, createClient(){ this.selClient = {}; } } } lt;/scriptgt;
Ответ №1:
Я исправил это, в своем индексе я просто зафиксировал данные своего поля при сохранении, чтобы моя таблица заполнялась и отображала данные.
promise.then(function (response) { if (clientdata.id != null) { commit("saveClient", clientdata) } else { commit("addClient", response.data.data) } ! added my commit here to fill fields :) ! })