Laravel + Vue如何将下拉列表中的值发送到数据库？

y3bcpkx1 于 2023-06-24 发布在其他

关注(0)|答案(1)|浏览(126)

请告诉我。我有两个组成部分。“AddFactorComponent.vue”用于将输入的值发送到“数据库”，还有一个内置组件“Factors_lists.vue”，它作为下拉列表。问题是如何将所选值从“Factors_lists.vue”发送到数据库。
AddFactorComponent.vue

<template>
  <div class="col-10">
    <div class="container-lg d-flex justify-content-center pt-1">
        <section class="data-tab" style="border: 1px solid white; width: 1200px">
            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                <a href="/"><button type="button" class="btn-close btn-close-white" aria-label="Close"></button></a>
            </div>
            <div class="mb-3">
                <label for="factory_number" class="form-label">Factor evaluated by SI</label>
                <el-input v-model="factor" autosize type="textarea" placeholder=""/>
            </div>
            <div class="d-grid gap-2" >
                <label for="factory_number" class="form-label"Factor evaluated by SI</label>

            <Factors_lists ></Factors_lists>

            </div>
            <div class="mb-3">
                <label for="factory_number" class="form-label">Equipment ID</label>
                <el-input v-model="equipment_id " autosize type="textarea"
      placeholder=""/>
            </div>
            <div class="d-grid gap-2">
                <input @click.prevent="Add" class="btn third" value="Add">
            </div>
            <SpisokFactorComponent ref="spisok_factor_component"></SpisokFactorComponent>
        </section>
    </div>
</div>
</template>

Factors_lists.vue

<template>
    <select v-model="selectedfactors_list">Select your option
        <option v-for="factors_list in factors_lists" :key="factors_list.id" :value="factors_list.id">
            {{ factors_list.name }}
        </option>
    </select>
</template>

<script>
export default {
    name: "Factors_lists",
    data() {
        return {
            factors_lists: [],
            selectedfactors_list: null
        }
    },
    mounted() {
        this.getPoluhenie();
    },
    methods: {
        getPoluhenie() {
            axios.get('/api/lists')
                .then(response => {
                    this.factors_lists = response.data;
                })
                .catch(error => {
                    console.error(error);
                });
        }
    }
}
</script>

控制器

class Factors_listsController extends Controller
{
    public function index() {
        $items = Factors_lists::all();
        return response()->json($items);
    }
}

laravel

来源：https://stackoverflow.com/questions/76492998/laravel-vue-how-do-i-send-the-selected-value-from-the-drop-down-list-to-the-da

1条答案

按热度按时间

93ze6v8z1#

AddFactorComponent.vue

<template>
    <!-- ... -->
    <Factors_lists v-model="factor"></Factors_lists>
    <!-- ... -->
    <input @click.prevent="Add" class="btn third" value="Add" type="submit">
    <!-- ... -->
</template>
<script>
    export default {
        // ...
        data() {
            return {
                factor: null, // <- value from <select>
            };
        },
        // ...
        methods: {
            // ...,
            Add() {
                axios.post('/api/lists', {factor: this.factor}) // <- sending the value from <select>
            },
            // ...
        },
        // ...
    }
</script>

Factors_lists.vue

<script>
    export default {
        // ...
        props: {
            value: { // <- waiting the value from AddFactorComponent.vue via `v-model`
                type: null,
                required: true,
            }
        },
        data() {
            return {
                factors_lists: [],
                selectedfactors_list: null, // <- remove this line because it has migrated to `computed`
            }
        },
        computed: {
            selectedfactors_list: {
                get() {
                    return this.value; // get value for <select> from AddFactorComponent.vue
                },
                set(value) {
                    this.$emit('input', value); // send the new value to AddFactorComponent.vue
                }
            }
        },
        // ...
    }
</script>

Factors_listsController

// ...
public function store(Request $request) {
    $factor = $request->input('factor'); // the value from vue
}
// ...

routes/api.php

Route::post('/api/lists', [Factors_listsController::class, 'store']);

您需要阅读文档：

vue.js v-model
vue.js prop
vue.js emit
Laravel控制器

赞(0）回复(0）举报 2023-06-24

我来回答

Laravel + Vue如何将下拉列表中的值发送到数据库？

1条答案

相关问题

热门标签

最新问答