web-dev-qa-db-ja.com

vue routerを使用してオブジェクトを小道具として渡す方法は？

私は次のフィドルを持っています https://jsfiddle.net/91vLms06/1/

const CreateComponent = Vue.component('create', {
  props: ['user', 'otherProp'],
  template: '<div>User data: {{user}}; other prop: {{otherProp}}</div>'
});

const ListComponent = Vue.component('List', {
  template: '<div>Listing</div>'
});

const app = new Vue({
  el: '#app',
  router: new VueRouter(),
  created: function () {
    const self = this;
        // ajax request returning the user
    const userData = {'name': 'username'}

    self.$router.addRoutes([
      { path: '/create', name: 'create', component: CreateComponent, props: { user: userData }},
      { path: '/list', name: 'list', component: ListComponent },
      { path: '*', redirect: '/list'}
    ]);
    self.$router.Push({name: 'create'}); // ok result: User data: { "name": "username" }; other prop:
    self.$router.Push({name: 'list'}); // ok result: Listing

    // first attempt
    self.$router.Push({name: 'create', props: {otherProp: {"a":"b"}}}) // not ok result: User data: { "name": "username" }; other prop:
    self.$router.Push({name: 'list'}); // ok result: Listing

    // second attempt
    self.$router.Push({name: 'create', params: {otherProp: {"a":"b"}}}) //not ok result: User data: { "name": "username" }; other prop:
  }
});

最初にわかるように、ルートを初期化するときだけ、CreateComponentuserに渡しています。

後で別のプロパティotherPropを渡し、userパラメータを保持する必要があります。これを行おうとすると、送信したオブジェクトがコンポーネントに渡されません。

otherPropを渡し、userを保持するにはどうすればよいですか？

otherPropの本当の目的は、フォームからのデータをフォームに入力することです。リストパーツにはオブジェクトがあり、[編集]ボタンをクリックすると、リストから取得したデータをフォームに入力します。

javascriptvue.jsvuejs2vue-router
16
tzortzik

propsの関数モード とparamsを使用して機能します

デモ： https://jsfiddle.net/jacobgoh101/mo57f0ny/1/

ルートを追加するときは、 propsの関数モード を使用して、デフォルトのプロパティuserを設定し、route.paramsをプロパティとして追加します。

{
    path: '/create',
    name: 'create',
    component: CreateComponent,
    props: (route) => ({
        user: userData,
        ...route.params
    })
}

pushで渡されたパラメータは、自動的に小道具に追加されます。

self.$router.Push({
    name: 'create',
    params: {
        otherProp: {
            "a": "b"
        }
    }
})
21
Jacob Goh