解決したいこと propsで受け取った配列が二重配列になっている原因を知りたい。 vue-routerを利用してコンポーネントを生成。 propsでArrayを渡す発生している...

props: route => ({ p_arr: Array(route.params.arr) }) ここを props: route =>...

@homusuke (がみん)posted at 2020-11-11

Arrayをpropsで受け取ると二重配列になっている【vue-router】

Q&A

Closed

Vue.js vue-router

解決したいこと

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>

応急処置により、動くは動くきます。

しかし原因が掴めず、モヤモヤしています。
根本的な理解ができていなだけな気がします。
おかしなところがあればご指摘願います🙏ｖ

2Answer

@uasi posted at 2020-11-11

    props: route => ({
      p_arr: Array(route.params.arr)
    })

ここを

    props: route => ({
      p_arr: route.params.arr
    })

こうすればいいのでは。

1Like

Comments

@homusuke
Questioner
なるほど…根本的なところの理解が深まりました！
ありがとうございました🙇‍♀️

@yuzuru2 posted at 2020-11-11

ソースコード

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

1Like

Comments

@homusuke
Questioner
なるほど、理解できました。
例まで用意していただいて…ありがとうございました！🙇‍♀️

Are you sure you want to delete the question?

Arrayをpropsで受け取ると二重配列になっている【vue-router】

解決したいこと

発生している問題・エラー

該当するソースコード

自分で試したこと

routerのparamを変更してみる

受け取った二重配列を配列に直す(応急処置)

2Answer

Comments

ソースコード

コマンド

Comments

Your answer might help someone💌