ajax - How to transfer JSON array with form settings from Laravel controller to vue3 template - Stack Overflow

admin管理员组

文章数量:1188851

I want to write a code to show edit forms in a edit formular that he dynamically show <input type='text'> if type field has value text.

The idea is to create something like phpmyadmin edit form

I have a Controller which exports the values "name","type","value",... now I want to build a Form element for each row.

my template code looks like:

edit

<template>
                    <div>
                        <pre>{{ formData }}</pre>
                        <pre>{{ formFields }}</pre>
                        <form @submit.prevent="submitForm">
                        <div v-for="field in formFields" :key="field.name">
                            <!-- Dynamic Fields based on Fieldtype -->
                            <div v-if="field && field.type === 'text'">
                            <InputFormText
                                :id="field.id"
                                :name="field.name"
                                :value="field.value"
                                :placeholder="field.placeholder || ''"
                            >
                                <template #label>{{ field.label }}</template>
                            </InputFormText>
                            </div>
                            <div v-if="field && field.type === 'datetime'">
                                <InputFormDateTime
                                :id="field.id"
                                :name="field.name"
                                :value="field.value"
                                :placeholder="field.placeholder || ''"
                            >
                                <template #label>{{ field.label }}</template>
                            </InputFormDateTime>
                            </div>
                        </div>
                        </form>
                    </div>
                </template>

if I get the values in JSON he just shows nothing the result is a empty Form. I Tried different ways to transfer the data from php to vue

export default {
  data() {
    return {
      formFields: {
        
    "idField": {
      "name": "id",
      "type": "text",
      "label": "ID",
      "value": "2",
      "id": "2",
      "class": "disabled"
   },
    "nameField": {
      "name": "name",
      "type": "text",
      "label": "Name",
      "value": "Devlog",
      "id": "2",
      "class": "text"
   },
    "created_atField": {
      "name": "created_at",
      "type": "datetime",
      "label": "Erstellt am:",
      "value": "",
      "id": "2",
      "class": "datetime"
   }
  
      },
      formData: {}
    };
  },

This works but I want the data from Controller. I tried different layouts for JSON array but nothing works. How should I format the JSON in the controller and how to transfer? I used Ajax for fetching the data from Controller.

edit:

Now I want to describe what I want: I have a DB with different tables and columns I want to make a admin panel on which the column name has different Form elements in a Vue file.

now I have the problem that the variable is correct in Vue but it doesn't shows any <input> tags

if I register the values in data() everything works, but I don't want to have to create for 7 tables 7 vues to display the admin tool

here the code to fetch:

 axios.get(route("GetTableForm", [table, id]))  
      .then(response => {
    this.formFields = response.data.formFields;  
      })
      .catch(error => {
        console.error('error fetching data:', error);
      });

edit2

here the array in JSON:

{
    "idField": {
      "name": "id",
      "type": "text",
      "label": "ID",
      "value": "2",
      "id": "2",
      "class": "disabled"
   },
    "nameField": {
      "name": "name",
      "type": "text",
      "label": "Name",
      "value": "Devlog",
      "id": "2",
      "class": "text"
   },
    "created_atField": {
      "name": "created_at",
      "type": "datetime",
      "label": "Erstellt am:",
      "value": "",
      "id": "2",
      "class": "datetime"
   }
  }

here the array out of controller:

$fields[$namefield] = [
            'name'  => "$name",
            'type'  => "$type",
            'label' => "$label",
            'value' => "$value",
            'id'    => "$id",
            'class' => "$class",
        ];

the json syntax is correct and the same as I put it in data() and comment the axios out which works fine

edit

So, I have observed that it takes the values from data() for 1 second and when it executes the mounted() it only shows <pre>{{formFields}}</pre> again but it does not take it into the template. I just need a form which creates a suitable form field depending on the DB table column. I have 2 components called <InputFormText> ( normal <input type='text'>) and <InputFormDateTime> (<input type='datetime-local'> datetime picker) There are more to follow but I wanted to try first if it takes it over at all, which it doesn't

the route is returning this:

$id = (int)$id;
        $id = $id == 0 ? "1" : $id;
        $columns = Schema::getColumnListing($table);
        $tables = DB::table($table)->where('id',$id)->orderBy($ord[0],$ord[1])->first();

            foreach($columns as $column)
            {
              $fields[] = FormController::Fields($column,$tables->$column,$table,$create,@$id);
            }
            $formFields = array_filter($fields);
            $ar = ['formFields' => ($formFields)];
            return response()->json($ar);

I want to write a code to show edit forms in a edit formular that he dynamically show <input type='text'> if type field has value text.

The idea is to create something like phpmyadmin edit form

I have a Controller which exports the values "name","type","value",... now I want to build a Form element for each row.

my template code looks like:

edit

<template>
                    <div>
                        <pre>{{ formData }}</pre>
                        <pre>{{ formFields }}</pre>
                        <form @submit.prevent="submitForm">
                        <div v-for="field in formFields" :key="field.name">
                            <!-- Dynamic Fields based on Fieldtype -->
                            <div v-if="field && field.type === 'text'">
                            <InputFormText
                                :id="field.id"
                                :name="field.name"
                                :value="field.value"
                                :placeholder="field.placeholder || ''"
                            >
                                <template #label>{{ field.label }}</template>
                            </InputFormText>
                            </div>
                            <div v-if="field && field.type === 'datetime'">
                                <InputFormDateTime
                                :id="field.id"
                                :name="field.name"
                                :value="field.value"
                                :placeholder="field.placeholder || ''"
                            >
                                <template #label>{{ field.label }}</template>
                            </InputFormDateTime>
                            </div>
                        </div>
                        </form>
                    </div>
                </template>

if I get the values in JSON he just shows nothing the result is a empty Form. I Tried different ways to transfer the data from php to vue

export default {
  data() {
    return {
      formFields: {
        
    "idField": {
      "name": "id",
      "type": "text",
      "label": "ID",
      "value": "2",
      "id": "2",
      "class": "disabled"
   },
    "nameField": {
      "name": "name",
      "type": "text",
      "label": "Name",
      "value": "Devlog",
      "id": "2",
      "class": "text"
   },
    "created_atField": {
      "name": "created_at",
      "type": "datetime",
      "label": "Erstellt am:",
      "value": "",
      "id": "2",
      "class": "datetime"
   }
  
      },
      formData: {}
    };
  },

This works but I want the data from Controller. I tried different layouts for JSON array but nothing works. How should I format the JSON in the controller and how to transfer? I used Ajax for fetching the data from Controller.

edit:

Now I want to describe what I want: I have a DB with different tables and columns I want to make a admin panel on which the column name has different Form elements in a Vue file.

now I have the problem that the variable is correct in Vue but it doesn't shows any <input> tags

if I register the values in data() everything works, but I don't want to have to create for 7 tables 7 vues to display the admin tool

here the code to fetch:

 axios.get(route("GetTableForm", [table, id]))  
      .then(response => {
    this.formFields = response.data.formFields;  
      })
      .catch(error => {
        console.error('error fetching data:', error);
      });

edit2

here the array in JSON:

{
    "idField": {
      "name": "id",
      "type": "text",
      "label": "ID",
      "value": "2",
      "id": "2",
      "class": "disabled"
   },
    "nameField": {
      "name": "name",
      "type": "text",
      "label": "Name",
      "value": "Devlog",
      "id": "2",
      "class": "text"
   },
    "created_atField": {
      "name": "created_at",
      "type": "datetime",
      "label": "Erstellt am:",
      "value": "",
      "id": "2",
      "class": "datetime"
   }
  }

here the array out of controller:

$fields[$namefield] = [
            'name'  => "$name",
            'type'  => "$type",
            'label' => "$label",
            'value' => "$value",
            'id'    => "$id",
            'class' => "$class",
        ];

the json syntax is correct and the same as I put it in data() and comment the axios out which works fine

edit

So, I have observed that it takes the values from data() for 1 second and when it executes the mounted() it only shows <pre>{{formFields}}</pre> again but it does not take it into the template. I just need a form which creates a suitable form field depending on the DB table column. I have 2 components called <InputFormText> ( normal <input type='text'>) and <InputFormDateTime> (<input type='datetime-local'> datetime picker) There are more to follow but I wanted to try first if it takes it over at all, which it doesn't

the route is returning this:

$id = (int)$id;
        $id = $id == 0 ? "1" : $id;
        $columns = Schema::getColumnListing($table);
        $tables = DB::table($table)->where('id',$id)->orderBy($ord[0],$ord[1])->first();

            foreach($columns as $column)
            {
              $fields[] = FormController::Fields($column,$tables->$column,$table,$create,@$id);
            }
            $formFields = array_filter($fields);
            $ar = ['formFields' => ($formFields)];
            return response()->json($ar);

• ajax
• vuejs3
• laravel-11

Share Improve this question Follow edited Jan 26 at 9:19 Asario asked Jan 24 at 22:05 AsarioAsario 7111 gold badge11 silver badge88 bronze badges 1

• Not sure if we do have a language barrier here but I still struggle to understand what's the problem. Is the the backend or the frontend? If you put the JSON by hand into data it works? You just don't know how to fetch it properly? What do you have if you use Hoppscotch, your payload as expected or something different? – kissu Commented Jan 25 at 16:51

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

This works well as seen in this playground

<script setup>
import { ref } from 'vue'

const formFields = ref({
  nameField: { name: "name", label: "Name", type: "text" },
  emailField: { name: "email", label: "Email", type: "text" },
})

const formData = ref({})

function submitForm() {
  alert(JSON.stringify(formData.value))
}
</script>

<template>
  <div>
    <pre>{{ formData }}</pre>

    <form @submit.prevent="submitForm">
      <div v-for="field in formFields" :key="field.name">
        <label :for="field.name">{{ field.label }}</label>
        <div v-if="field && field.type === 'text'">
          <input
            type="text"
            :name="field.name"
            v-model="formData[field.name]"
          />
        </div>
      </div>

       <button type="submit">Absenden</button>
    </form>
  </div>
</template>

You could replace the alert with a fetch and try to send it back to your backend. In this guide, you can see the syntax of how to achieve to do a "Creating a resource".

If you're not sure what's wrong with your backend, you should focus on this first and send this payload from a tool like Hoppscotch (or Postman, if you prefer enterprise-owned tools) to find out what's not working.
So far, your current payload from the backend is correct given your VueJS' template structure.

Feel free to also check your browser's devtools, Network tab to find out exactly what you're receiving/sending down the pipe.

---

PS: I edited the key from your original snippet because you're not supposed to loop on a v-for's index.

本文标签： ajaxHow to transfer JSON array with form settings from Laravel controller to vue3 templateStack Overflow