【发布时间】：2022-01-04 13:44:09
【问题描述】：
我决定更改问题并单独尝试。我尝试将 Laravel Blade 转换为 Vue 3 页面，但结果与我预期的不一样。
这是 Laravel Blade 代码：
<table id="mahasiswa" class="table table-bordered table-hover">
<thead>
<tr>
<th width="20vh">No</th>
<th width="75vh">NIM</th>
<th>Nama</th>
@foreach($kriteria as $krit)
<th>{{$krit->nama}}</th>
@endforeach
<th width="100vh">Aksi</th>
</tr>
</thead>
<tbody>
<?php $no = 1; ?>
@if(!empty($mahasiswa))
{{-- variable $mahasiswa berisi nilai dari setiap kriteria per mahasiswa --}}
@foreach($mahasiswa as $mhs)
<tr>
<td>{{$no++}}</td>
<td>{{$mhs->nim}}</td>
<td>{{$mhs->nama}}</td>
@if(count($mhs->nilai) == 0)
@foreach($kriteria as $krit)
<td><i>Tidak ada data</i></td>
@endforeach
@endif
@foreach($mhs->nilai as $nilai)
<td>{{$nilai->nilai_alt}}</td>
@endforeach
<td class="text-center">
@if(count($mhs->nilai) == 0)
<a href="{{ route('nilai.tambah',['id' => $mhs->id]) }}" class="btn btn-sm btn-primary">
<i class="fas fa-plus"></i>
</a>
@else
<a href="{{ route('nilai.edit', ['id' => $mhs->id]) }}" class="btn btn-sm btn-warning">
<i class="fas fa-pen"></i>
</a>
@endif
</td>
</tr>
@endforeach
@endif
</tbody>
</table>这是我对 Vue 3 的转换工作（我使用 Tailwind CSS 3，以防你感到困惑）：
import axios from 'axios'
import { onMounted, ref, computed } from 'vue'
import SideBar from './../../../components/SideBar.vue'
export default {
components: {
SideBar,
},
setup() {
let peserta1 = ref([])
let result = ref([])
let penilaian1 = ref([])
let subkriteria = ref([])
onMounted(() => {
axios
.get('http://127.0.0.1:8000/api/penilaian1')
.then((result) => {
penilaian1.value = result.data
})
.catch((err) => {
console.log(err.response)
})
})
onMounted(() => {
axios
.get('http://127.0.0.1:8000/api/penilaian1/table_sk1')
.then((result) => {
subkriteria.value = result.data
})
.catch((err) => {
console.log(err.response)
})
})
onMounted(() => {
axios
.get('http://127.0.0.1:8000/api/penilaian1/peserta1')
.then((result) => {
peserta1.value = result.data
})
.catch((err) => {
console.log(err.response)
})
})
const transpose = () => {
penilaian1.value.forEach((dat) => {
if (!result.value.find((r) => r.nim === dat.nim)) {
result.value.push({ nim: dat.nim, nama: dat.nama })
}
})
penilaian1.value.forEach((dat) => {
let res = result.value.find((r) => r.nim === dat.nim)
res[dat.id_sk1] = dat.nilai
})
console.log(result)
}
return {
peserta1,
penilaian1,
subkriteria,
transpose,
}
},
}<template>
<div class="relative min-h-screen md:flex">
<SideBar />
<div class="flex-1">
<div class="col-12">
<h1 class="px-6 py-6 mb-6 text-3xl font-extrabold">
Data Penilaian
</h1>
</div>
<div class="col-12">
<div class="flex-1">
<div class="overflow-y-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 inline-clip sm:px-6 lg:px-12">
<div
class="overflow-hidden shadow-md sm:rounded-lg"
>
<table class="min-w-full">
<thead class="bg-gray-100 dark:bg-gray-700">
<tr>
<th
scope="col"
class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
>
NIM
</th>
<th
scope="col"
class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
>
Nama
</th>
<th
v-for="subkriteria in subkriteria"
:key="subkriteria.id"
scope="col"
class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
>
{{ subkriteria.nama }}
</th>
<th
scope="col"
class="relative px-6 py-3"
>
<span class="sr-only"
>Aksi</span
>
</th>
</tr>
</thead>
<tbody>
<!-- Product 1 -->
<template v-if="peserta1.count == 0">
<tr
v-for="peserta1 in transpose"
:key="peserta1.id"
class="bg-white border-b dark:bg-gray-800 dark:border-gray-600"
>
<td
class="px-6 py-4 text-sm font-medium text-gray-900 whitespace-nowrap dark:text-white"
>
{{ peserta1.nim }}
</td>
<td
class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"
>
{{ peserta1.nama }}
</td>
<template
v-if="peserta1.length == 0"
>
<td
v-for="subkriteria in subkriteria"
:key="subkriteria.id"
class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap"
>
Tidak ada data
</td>
</template>
<template>
<td
v-for="penilaian in penilaian1"
:key="penilaian.id"
class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap"
>
{{ penilaian.nilai }}
</td>
</template>
<td
v-if="penilaian.nilai == 0"
class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap"
>
<router-link
:to="{
name: 'penilaian1.tambah',
params: {
id: penilaian.nim,
},
}"
class="text-blue-600 hover:text-blue-900 dark:text-blue-500 dark:hover:underline"
>Tambah</router-link
>
</td>
<td
v-else
class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap"
>
<router-link
:to="{
name: 'penilaian1.edit',
params: {
id: penilaian.nim,
},
}"
class="text-blue-600 hover:text-blue-900 dark:text-blue-500 dark:hover:underline"
>Edit</router-link
>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>但结果是：
我没有看到任何基于标准数据表的列循环（因此标准列可以根据此表动态显示）和带有空等级数据的 nilai/grade 数据
我的期望是：
请指导我进行 Laravel Blade 的 Vue 转换，并告诉我 Laravel Blade 指令的 Vue 条件渲染等效项（主要主题和问题），因为 PHP 和 JavaScript 不同，请给我一些关于我的 Vue 代码的反馈。
【问题讨论】：
标签： javascript php laravel vuejs3