我想创建“ VendorDetail.vue”组件，并从组件“ Vendors.vue”中获取数据。在“ Vendors.vue”中，用户可以选择一些列表对象，并将其显示在“ vendorDetail.vue”上。因此，在“ VendorDetail.vue”中，传递ID属性并显示路线中的对象。
我该如何解决？
在“ routes.js”中
import Home from './components/Home.vue'
import Login from './components/Login.vue'
import Join from './components/Join.vue'
import TentangKami from './components/TentangKami.vue'
import CaraPrint from './components/CaraPrint.vue'
import RegisterUser from './components/RegisterUser.vue'
import RegisterPartnership from './components/RegisterPartnership.vue'
import DashboardUser from './components/user/Dashboard.vue'
import Dashboard from './components/partnership/Dashboard.vue'
import Profil from './components/partnership/Profil.vue'
import Produk from './components/partnership/Produk.vue'
import Pesanan from './components/partnership/Pesanan.vue'
import Dicetak from './components/partnership/Dicetak.vue'
import VendorDetail from './components/user/VendorDetail.vue'
import Completed from './components/user/Completed.vue'
import Vendors from './components/user/Vendors.vue'
//const url = 'http://127.0.0.1:8000/api/board/'
const routes = [
{
path: '*',
redirect: '/login'
},
{
path: '/',
name: 'home',
component: Home
},
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/register-user',
name: 'register-user',
component: RegisterUser
},
{
path: '/register-partnership',
name: 'register-partnership',
component: RegisterPartnership
},
{
path: '/join',
component: Join
},
{
path: '/tentang-kami',
component: TentangKami
},
{
path: '/cara-print',
component: CaraPrint
},
{
path: '/dashboard-partnership/:id',
component: Dashboard,
children: [
{
path: '',
component: Profil
},
{
path: 'profil',
component: Profil
},
{
path: 'produk',
component: Produk
},
{
path: 'pesanan',
component: Pesanan
},
{
path: 'dicetak',
component: Dicetak
},
]
},
{
path: '/dashboard-user/:id',
component: DashboardUser,
props: true,
children: [
{
path: '',
component: DashboardUser,
name: 'dashboard-user'
},
{
path: 'vendors',
component: Vendors,
name: 'vendors',
},
{
path: 'vendor-detail/:id',
component: VendorDetail,
name: 'vendor-detail',
props: true
},
{
path: 'completed',
name: 'completed',
component: Completed
}
]
},
];
export default routes;
在“ src / components / user / Vendors.vue”中
<template>
<div class="flex pa2 justify-between ph5">
<div class="fl w-50 w-25-m w-20-l pa2 " v-for="board in boards" :key="board.id">
<router-link to="'/dashboard-user/id/vendor-detail/' + board.id" class="db link dim tc grow dashboard--card">
<img src="../../assets/img/print1.png" alt="Profil Percetakan" class="w-100 db"/>
<dl class="mt2 f6 lh-copy ph3">
<dt class="clip">Title</dt>
<dd class="ml0 black truncate w-100 tl">{{board.name}}</dd>
<dt class="clip">Artist</dt>
<dd class="ml0 gray truncate w-100 tl">{{board.description}}</dd>
</dl>
</router-link>
</div>
</div>
</template>
<script>
/* eslint-disable */
import axios from 'axios'
import { mapState, Store } from 'vuex'
const url = 'http://127.0.0.1:8000/api/board/'
export default {
name: 'Vendors',
data() {
return {
user: 'Hilman Luthfi',
boards: [],
search: null
}
},
mounted() {
axios.get(url)
.then(response => {
this.boards = response.data
console.log(response.status)
console.log(response.data)
})
.catch((error) => {
console.log(error)
})
},
}
</script>
在“ src / components / user / VendorDetail.vue”中
<template>
<div>
<div class="mw9 center ph3-ns mt5-ns">
<div class="cf ph2-ns">
<div class="fl w-100 w-40-ns pa2 mh4 tl">
<img src="../../assets/img/print1.png" alt="Profil Percetakan" class="w-90"/>
<div>
<p class="f4 b ttu mv4">detail pemesanan</p>
<div class="pv2">
<label for="rangkap" class="f6 db lh-copy">Rangkap</label>
<input type="number" name="rangkap" id="rangkap" v-model="rangkap" />
</div>
<div class="pv2">
<label for="halaman" class="f6 db lh-copy">Halaman</label>
<input type="number" name="halaman" id="halaman" v-model="halaman" />
</div>
<div class="pv2">
<label for="jenis-kertas" class="f6 db lh-copy">Jenis Kertas</label>
<select name="jenis-kertas" id="jenis-kertas" v-model="jenisKertas">
<option value="a4">A4</option>
<option value="a3">A3</option>
<option value="a2">A2</option>
</select>
</div>
<div class="pv2">
<label for="jenis-print" class="f6 db lh-copy">Jenis Print</label>
<select name="jenis-print" id="jenis-print" v-model="jenisPrint">
<option value="hitam-putih">Hitam Putih</option>
<option value="berwarna">Berwarna</option>
</select>
</div>
<div class="pv2">
<label for="finishing" class="f6 db lh-copy">Finishing</label>
<select name="finishing" id="finishing" v-model="finishing">
<option value="jilid">Jilid</option>
<option value="hard-cover">Hard Cover</option>
</select>
</div>
<div class="pv2">
<label for="warna-cover" class="f6 db lh-copy">Warna Cover</label>
<select name="warna-cover" id="warna-cover" v-model="warnaCover">
<option value="putih">Putih</option>
<option value="biru">Biru</option>
<option value="kuning">Kuning</option>
<option value="merah">Merah</option>
<option value=hijau>Hijau</option>
</select>
</div>
</div>
</div>
<div class="fl w-100 w-50-ns ph2">
<h4 class="f2 tl">{{ board.name }}</h4>
<p class="lh-copy tl">{{ board.description }}</p>
<p class="b f4 mv3 pt3 tl">Upload dokumenmu disini</p>
<div>
<div id="file-box">
<input id="input-file" placeholder="Lepaskan Filemu disini" class="db mv3" type="file" name="file" />
<p id="label-file">Lepaskan Filemu disini</p>
</div>
</div>
<textarea id="input-message" name="message" class="db mv4" type="text" placeholder="Tambahkan Pesan" v-model="pesan"/>
<p class="f4 b ttu tl">total harga</p>
<p class="f4 b tl">Rp {{ total }}</p>
<hr>
<input type="button" @click="orderNow" value="Cetak Sekarang" class="f6 grow no-underline br-pill ph4 pv3 mv2 b white" />
</div>
</div>
</div>
</div>
</template>
<script>
import Axios from 'axios'
const url = 'http://127.0.0.1:8000/api/board/'
export default {
name: 'VendorDetail',
props: ['id'],
data() {
return {
user: 'Hilman Luthfi',
total: '15.000,00',
rangkap: '',
halaman: '',
pesan: '',
jenisKertas: '',
jenisPrint: '',
finishing: '',
warnaCover: '',
board: {}
}
},
created() {
Axios.get(url + this.$route.params.id + '/')
.then(response => {
this.board = response.data
console.log(response.status)
console.log(response.data)
})
.catch(error => {
console.log(error)
})
},
methods: {
orderNow: () => {
this.$router.push({name: 'completed'})
}
}
}
</script>
答案 0 :(得分：0)
已更新：
您可以像这样在router-link中传递道具：
<router-link :to="{ name: 'vendor-detail', params: { id: board.id }}"></router-link>
答案 1 :(得分：0)
this.$router.push({
name: "output",
params: { searchResults: this.searchResults}
});
在输出组件中，您需要创建一个名称为“ searchResults”的Prop，仅此而已。在该道具中，您将获得this.searchResults值。