Laravel Vue存储含外键数据时遇ESLint错误求助

错误1：Elements in iteration expect to have 'v-bind:key' directives #

• 问题原因：Vue要求v-for循环的元素必须绑定唯一key属性，用于跟踪元素身份、优化DOM渲染性能。
• 修复方案：在部门下拉框的<option>标签上添加:key="departemen.id"（利用部门ID作为唯一标识）。

原代码：

<option v-for="departemen in departemens" v-bind:value="departemen.id">{{ departemen.nama_departemen }}</option>

修复后：

<option v-for="departemen in departemens" :key="departemen.id" :value="departemen.id">{{ departemen.nama_departemen }}</option>

错误2：'departemen' is not defined #

• 问题原因：store方法中错误引用了未定义的departemen变量，实际上下拉框已通过v-model="pegawai.id_departemen"绑定了选中的部门ID，直接使用该绑定值即可。
• 修复方案：将let id_departemen = departemen.id替换为let id_departemen = pegawai.id_departemen。

原代码片段：

function store() {
    let nomor_induk_pegawai = pegawai.nomor_induk_pegawai
    let nama_pegawai = pegawai.nama_pegawai
    let id_departemen = departemen.id
    // ...
}

修复后：

function store() {
    let nomor_induk_pegawai = pegawai.nomor_induk_pegawai
    let nama_pegawai = pegawai.nama_pegawai
    let id_departemen = pegawai.id_departemen
    // ...
}

完整修复后的代码 #

<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" :key="departemen.id" :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>
</form>

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

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

        let departemens = ref([])

        onMounted(() => {
            axios.get('http://localhost:8000/api/departemens')
                .then(response => {
                    departemens.value = response.data.data
                }).catch(error => {
                    console.log(error.response.data)
                })
        })

        const validation = ref([])
        const router = useRouter()

        function store() {
            let nomor_induk_pegawai = pegawai.nomor_induk_pegawai
            let nama_pegawai = pegawai.nama_pegawai
            let id_departemen = pegawai.id_departemen
            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(() => {
                router.push({
                    name: 'pegawai.index'
                })
            }).catch(error => {
                validation.value = error.response.data
            })
        }

        return {
            departemens,
            pegawai,
            validation,
            router,
            store
        }
    }
}
</script>

内容的提问来源于stack exchange，提问作者Bruh Brah