Блог

Всякий раз, когда я сохраняю первый товар в своем магазине, он не отображается во внешнем интерфейсе, только мои кнопки. После добавления первой строки и обновления я могу добавить еще несколько строк, которые действительно отображаются. Я попытался создать 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;  

Я исправил это, в своем индексе я просто зафиксировал данные своего поля при сохранении, чтобы моя таблица заполнялась и отображала данные.

 promise.then(function (response) {  if (clientdata.id != null) {  commit("saveClient", clientdata)  } else {  commit("addClient", response.data.data)  }  ! added my commit here to fill fields :) !  })