Laravel Vue store data foreign key - laravel

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
}
}
I'm trying to create data in table pegawais with id_departemen as foreign key from table departemens. the dropdown on label departemen suppose to show nama_departemen from table departemen with value id from table department. So I tried this and it said
32:37 error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key
128:33 error 'departemen' is not defined no-undef

Answer 1

As written in the error, this is how you should have it
<option v-for="departemen in departments"
:value="departemen.id"
:key="departmen.id" // 👈🏻 missing that one
>
{{ departemen.nama_departemen }}
</option>
More details are available here: https://eslint.vuejs.org/rules/require-v-for-key.html
And also here: https://vuejs.org/guide/essentials/list.html#maintaining-state-with-key
TLDR: when using a v-for, add a :key to it.