Comment insérer le formulaire de données dans le tableau lorsque vous appuyez sur un bouton de VUEX?

Vous obtenez les valeurs de formulaire individuellement à partir de Store code> et le rendant sur l'entrée code>. Cela provoque le problème que vous ne pouvez pas ajouter des lignes à la table.

avoir votre Store code> comme p>

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    formData: {
      name: "",
      category: "",
      code: "",
      price: ""
    },
    show: false,
    fData: []
  },
  getters: {
    fData: state => state.fData
  },
  mutations: {
    updateFdata: (state, payload) => {
      state.fData = [ ...state.fData, payload]
    }
  }
});

Voici le code de travail https://codeandbox.io/s/goofy-grass- C1YSG

Vous êtes sur le chemin droit, la plupart de votre code est correct, veuillez modifier votre formulaire.Vue comme ci-dessous pour envoyer des actions dans votre magasin. P>

<template>
<div>
<form action>
  <div class="form-group">
    <label for="name">نام محصول:</label>
    <input type="text" class="form-control" id="name" placeholder name="name" v-model="name">
  </div>
  <div class="form-group">
    <label for="grouping">دسته بندی:</label>
    <input type="text" class="form-control" id="grouping" placeholder name="group" v-model="category">
  </div>
  <div class="form-group">
    <label class="code">کد محصول:</label>
    <input type="text" class="form-control" id="coding" placeholder name="code" v-model="code">
  </div>
  <div class="form-group">
    <label for="price">قیمت محصول</label>
    <input type="text" class="form-control" id="pricing" placeholder name="price" v-model="price">
  </div>
  <button type="button" class="btn btn-success send"  @click.prevent="addUser">ثبت اطلاعات</button>
</form>
</div>
</template>
<script>
export default {
data(){ return {  name: '',  category: '',  code: '',  price: '', }  },
methods: {
 addUser() { 
     this.$store.dispatch('updateName', this.name)  
     this.$store.dispatch('updateCategory', this.category)  
     this.$store.dispatch('updateCode', this.code)  
     this.$store.dispatch('updatePrice', this.price)  
 }, 

}
};
</script>
<style scoped>
</style>

Voici un code de travail HTTPS: // Codesandbox. io / intégré / méchant-chatterjee-6susb? fontsize = 14 & hidenavigation = 1 & thème = Dark

Tout d'abord, vous devez utiliser des mutations pour modifier les valeurs d'état. Deuxièmement, vous pouvez utiliser la méthode code> data ​​code> dans le stockage des valeurs de formulaire avant de les soumettre. p>

ive a modifié votre magasin comme celui-ci p> xxx pré>

et dans votre forme, vous devez envoyer l'action AddUtiliser code> une fois que le formulaire est soumis ... p> xxx pré>

enfin, vous devez obtenir l'état Tabledata ​​code> et itérer les éléments de votre table ... P>

<template>
  <div class="table-responsive">
    <table class="table table-hover">
      <thead>
        <tr>
          <th>کد</th>
          <th>نام محصول</th>
          <th>دسته</th>
          <th>قیمت</th>
          <th>عملیات</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tableData" :key="item.name">
          <td>{{ item.code }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.category }}</td>
          <td>{{ item.price }}</td>
          <td>
            <button type="button" class="btn btn-primary mt">ویرایش</button>
            <button type="button" class="btn btn-danger mt">حذف</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>


<script>
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState(["tableData"])
  }
};
</script>


<style scoped>
</style>