Как передать JSON Array {{this.row}} в функцию submit () для публикации с использованием Axios.post

Question

this.row - Генерация ввода формы в массив JSON, который я пытаюсь опубликовать с помощью функции отправки, используя Axios, но не могу указать значение. Пожалуйста, помогите, что не так ??

Вот мой полный код

    <template>
    <form @submit.prevent="submit">
        {{ /* These are 3 buttons which are calling 3 different function to create input boxes  */ }}
        <div class="d-flex mt-5"><div>
            <label>Add A</label>
            <button type="button"  @click="addRow">01</button>
        </div>
            <div> <label>Add B</label>
                <button type="button"  @click="addRow1">02</button>
            </div>
            <div> <label>Add c</label>
                <button type="button"  @click="addRow3">03</button>
            </div>
        </div>
{{ /* this section calls button-counter template from script code  */ }}
        <div v-for="row in rows" :key="row.id">
            <button-counter :name ="row.name" :id="row.id" :value.sync="row.value"></button-counter>
        </div>

        <div>
            <button type="submit" class="btn btn-primary">Add Points</button>

        </div>


        <div v-if="success" class="alert alert-success mt-3">
            Message sent!
        </div>
    </form>
</template>

<script>
    Vue.component("button-counter", {
        props: {
            value: {
                default: "",

            }

        },
/* This is my template which gets called fro the addition of new inputs ...guess here I need to add v-model so that dynamically generated fields will be posted but I'm unable to get it posted */

        template: '<input  class="form-control" id= id.row   name=row.name type="number" style="margin-top: 10px;" :value="value" @change="$emit(\'update:value\', $event.target.value)">'
    });

    export default {
        props: ['gameId','userId'],

        mounted() {
            console.log('Component mounted.')
        },

        data() {
            return {

                gamex: this.gameId,
                rows: [],
                count: 0,
                fields: {},
                errors: {},
                success: false,
                loaded: true,
            };
        },
        computed: {
            total() {
                if (this.rows.length) {
                    return this.rows.reduce((acc, row) => acc += parseInt(row.value), 0);
                }

                return 0;
            }
        },
        methods: {
            addRow: function() {
                var txtCount = 1;
                let id = "txt_" + txtCount;

                this.rows.push({ name:'zero',value:100, description: "textbox1", id });
            },
            addRow1: function() {
                var txtCount = 1;
                let id = "txt2_" + txtCount;
                this.rows.push({name:'one',value:200, description: "textbox2", id });
            },
            addRow3: function() {
                var txtCount = 1;
                let id = "txt3_" + txtCount;
                this.rows.push({name:'two',value:300, description: "textbox3", id });
            },
            submit: function() {
                if (this.loaded) {
                    this.loaded = false;
                    this.success = false;
                    this.errors = {};
                    axios.post('/submit', this.rows).then(response => {
                        this.rows; //Clear input fields.
                        this.loaded = true;
                        this.success = true;
                    }).catch(error => {
                        this.loaded = true;
                        if (error.response.status === 422) {
                            this.errors = error.response.data.errors || {};
                        }
                    });
                }
            },

            followUser() {

                axios.post('/chklet/' + this.userId)
                    .then(response => {
                        return response.data ;
                    });
            }
        },
        mounted () {
            this.followUser();
        }
    };
</script>

Answer 1

Вы можете использовать JSON.stringify(array_to_convert_in_string_to_send_in_ajax), но вам придется json_decode также и на внутреннем сервере

В разделе сервера, например laravel:

$result = json_decode($request->your_array);