props: route => ({
p_arr: Array(route.params.arr)
})
ここを
props: route => ({
p_arr: route.params.arr
})
こうすればいいのでは。
Like!
Arrayをpropsで受け取ると二重配列になっている【vue-router】
Q&AClosed
解決したいこと
propsで受け取った配列が二重配列になっている原因を知りたい。
- vue-routerを利用してコンポーネントを生成。
- propsでArrayを渡す
発生している問題・エラー
Arrrayが二重になってしまっている。
該当するソースコード
要所以外は省略しています。
Home.vue
<template>
<router-link :to="{ name: 'detail', params: { arr: ['a', 'b'] } }">
</template>
router.js
//省略
{
name: 'detail',
path: '/detail',
component: Detail,
props: route => ({
p_arr: Array(route.params.arr)
})
}
//省略
Detai.vue
<script>
export default {
props: {
p_arr: Array// [["a", "b"]]
}
}
</script>
自分で試したこと
routerのparamを変更してみる
- p_arr: Arrayrouter.param.arr
+ p_arr: Arrayrouter.param.arr[0]
0が定義されていないためNG
受け取った二重配列を配列に直す(応急処置)
Detai.vue
<script>
export default {
props: {
p_arr: Array// [["a", "b"]]
},
data() {
return {
arr: []
}
},
created() {
this.arr = this.p_arr[0]//応急処置
}
}
</script>
応急処置により、動くは動くきます。
しかし原因が掴めず、モヤモヤしています。
根本的な理解ができていなだけな気がします。
おかしなところがあればご指摘願います🙏ｖ
1
2Answer
1
Comments
@homusuke
Questionerなるほど…根本的なところの理解が深まりました！
ありがとうございました🙇♀️
ソースコード
package.json
{
"scripts": {
"start": "parcel src/index.html --out-dir public"
},
"devDependencies": {
"@vue/component-compiler-utils": "^3.2.0",
"parcel-bundler": "^1.12.4",
"vue": "^2.6.12",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"vue-hot-reload-api": "^2.3.4",
"vue-router": "^3.4.9"
}
}
src/index.js
import Vue from 'vue';
import Router from 'vue-router';
import App from './App.vue';
import Home from './Home.vue';
import Detail from './Detail.vue';
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/detail',
name: 'detail',
component: Detail,
props: route => ({
p_arr: route.params.arr,
}),
},
],
});
Vue.use(Router);
Vue.config.productionTip = false;
new Vue({
el: '#app',
router,
render: h => h(App),
});
src/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>
src/App.vue
<template>
<div id="app">
<router-view />
</div>
</template>
src/Home.vue
<template>
<div>
<h1>Home画面</h1>
<router-link :to="{ name: 'detail', params: { arr: ['a', 'b'] } }">
detail
</router-link>
</div>
</template>
<script>
module.exports = {};
</script>
src/Detail.vue
<template>
<div>
<h1>Detail画面</h1>
<router-link :to="{ name: 'home' }">
Home
</router-link>
</div>
</template>
<script>
export default {
props: {
p_arr: Array,
},
created() {
console.log(this.p_arr);
},
};
</script>
コマンド
$ npm i
$ npm start
Like!
Comments
@homusuke
Questionerなるほど、理解できました。
例まで用意していただいて…ありがとうございました！🙇♀️