Laravel Vue 存储数据外键

Question

<form @submit.prevent="store">
                            <div class="form-group mb-3">
                                <label class="form-label">NIP</label>
                                <input type="text" class="form-control" v-model="pegawai.nomor_induk_pegawai"
                                    placeholder="Masukkan nomor induk pegawai">
                                <!-- validation -->
                                <div v-if="validation.nomor_induk_pegawai" class="mt-2 alert alert-danger">
                                    {{ validation.nomor_induk_pegawai[0] }}
                                </div>
                            </div>
                            <div class="form-group mb-3">
                                <label for="content" class="form-label">Nama Pegawai</label>
                                <input class="form-control" v-model="pegawai.nama_pegawai"
                                    placeholder="Masukkan nama pegawai">
                                <!-- validation -->
                                <div v-if="validation.nama_pegawai" class="mt-2 alert alert-danger">
                                    {{ validation.nama_pegawai[0] }}
                                </div>
                            </div>
                            <div class="form-group mb-3">
                                <label for="content" class="form-label">Departemen</label>
                                <select class="form-control" v-model="pegawai.id_departemen">
                                    <option v-for="departemen in departemens" v-bind:value="departemen.id">{{ departemen.nama_departemen }}</option>
                                </select>
                                <div v-if="validation.id_departemen" class="mt-2 alert alert-danger">
                                    {{ validation.id_departemen[0] }}
                                </div>
                            </div>
                            <div class="form-group mb-3">
                                <label class="form-label">Email</label>
                                <input type="text" class="form-control" v-model="pegawai.email"
                                    placeholder="Masukkan email">
                                <!-- validation -->
                                <div v-if="validation.email" class="mt-2 alert alert-danger">
                                    {{ validation.email[0] }}
                                </div>
                            </div>
                            <div class="form-group mb-3">
                                <label for="content" class="form-label">Telepon</label>
                                <input class="form-control" v-model="pegawai.telepon" placeholder="Masukkan telepon">
                                <!-- validation -->
                                <div v-if="validation.telepon" class="mt-2 alert alert-danger">
                                    {{ validation.telepon[0] }}
                                </div>
                            </div>
                            <div class="form-group mb-3">
                                <label for="content" class="form-label">Gender</label>
                                <select class="form-control" v-model="pegawai.gender">
                                    <option value="0"> Wanita </option>
                                    <option value="1"> Pria </option>
                                </select>
                                <!-- validation -->
                                <div v-if="validation.gender" class="mt-2 alert alert-danger">
                                    {{ validation.gender[0] }}
                                </div>
                            </div>
                            <div class="form-group mb-3">
                                <label for="content" class="form-label">Status</label>
                                <select class="form-control" v-model="pegawai.status">
                                    <option value="1"> Aktif </option>
                                    <option value="0"> Tidak Aktif </option>
                                </select>
                                <!-- validation -->
                                <div v-if="validation.status" class="mt-2 alert alert-danger">
                                    {{ validation.status[0] }}
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">SIMPAN</button>

<script>
import { reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'


export default {
    setup() {
    //state departemen
    const pegawai = reactive({
        nomor_induk_pegawai: '',
        id_departemen:'',
        nama_pegawai: '',
        email: '',
        telepon: '',
        gender: '',
        status: ''
    })

    let departemens = ref([])

    onMounted(() => {
        //get API from Laravel Backend
        axios.get('http://localhost:8000/api/departemens')
            .then(response => {
                //assign state posts with response data
                departemens.value = response.data.data
            }).catch(error => {
                console.log(error.response.data)
            })
    })

    //state validation
    const validation = ref([])

    //vue router
    const router = useRouter()

    //method store
    function store() {
        let nomor_induk_pegawai = pegawai.nomor_induk_pegawai
        let nama_pegawai = pegawai.nama_pegawai
        let id_departemen = departemen.id
        let email = pegawai.email
        let telepon = pegawai.telepon
        let gender = pegawai.gender
        let status = pegawai.status

        axios.post('http://localhost:8000/api/pegawais', {
            nomor_induk_pegawai: nomor_induk_pegawai,
            nama_pegawai: nama_pegawai,
            id_departemen: id_departemen,
            email: email,
            telepon: telepon,
            gender: gender,
            status: status
        }).then(() => {
            //redirect ke post index
            router.push({
                name: 'pegawai.index'
            })
        }).catch(error => {
            //assign state validation with error
            validation.value = error.response.data
        })
    }

    //return
    return {
        departemens,
        pegawai,
        validation,
        router,
        store
    }
}

我正在尝试使用 id_departemen 作为表 departemens 的外键在表 pegawais 中创建数据。标签 departemen 上的下拉菜单假设显示来自表 departemen 的 nama_departemen 以及来自表部门的值 id。所以我试了一下，它说

32:37 迭代中的错误元素期望具有“v-bind:key”指令 vue/require-v-for-key 128:33 错误“departemen”未定义 no-undef

Answer 1

正如错误中所写，这就是你应该拥有的方式

<option v-for="departemen in departments"
  :value="departemen.id"
  :key="departmen.id" // ?? missing that one
>
  {{ departemen.nama_departemen }}
</option>

此处提供更多详细信息：https://eslint.vuejs.org/rules/require-v-for-key.html
还有这里：https://vuejs.org/guide/essentials/list.html#maintaining-state-with-key

---

TLDR：使用v-for 时，请向其添加:key。