Question

我的主Vue app.data中有（用户）数据。而且我想通过/user/:userid之类的路由参数显示1条记录（用户）中的数据。

我一直在尝试很多事情，但是我刚开始学习vue，因此我不清楚哪种方法最好。

为了方便起见，我制作了一个Codepen：
https://codepen.io/anon/pen/NBgyOB?editors=1010

用户数据如下：

var data_users = [
  {id:1, name:'john', height:75},
  {id:2, name:'jane', height:75},
  {id:3, name:'alex', height:75},
  {id:4, name:'peter', height:75},
  {id:5, name:'maria', height:75},
]

vue应用看起来像这样：

var app = new Vue({
  router,
  data: {
    users: data_users
  }
  ,methods: {
    getUser(id) {
      var one = this.users.filter((d) => {
        return d.id == id;
      });
      return one[0];
    }
  }
}).$mount('#app');

我已经编码了一种从ID中选择1个用户的方法：
我不知道这是否需要一个方法/一个正常函数/其他东西;甚至应该放在主应用程序或其他地方。

和路线：

const User = { 
  props: ['id', 'thisUser'],
  template: `
  <div>
    <h3>User data:</h3>
    <h5>$route.params</h5>
      <p> this user id : {{$route.params.id}} </p>
    <h5>$parent & $root + method + $route.params</h5>
      <p> this user name:    {{$parent.getUser($route.params.id).name}} </p>
      <p> this user height:  {{$root.getUser($route.params.id).height}} </p>

    <h5>'id' prop</h5>
      <p> id : {{id}} </p>

    <h5>'thisUser' prop, = data_users[2]</h5>
      <p> user3 name:    {{thisUser.name}} </p>
      <p> user3 height:  {{thisUser.height}} </p>

    <h5>$parent & $root</h5>
      <p> user1 name:    {{$parent.users[0].name}} </p>
      <p> user1 height:  {{$root.users[0].height}} </p>

  </div> `
}

function dynamicPropsFn (route) {
  const now = new Date()
  return {
    name: (now.getFullYear() + parseInt(route.params.years)) + '!'
  }
}
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
  ,{ path: '/user/:id', component: User, props: {thisUser: data_users[2]} }
  // ,{ path: '/user/:id', component: User, props: {thisUser:getUser(id)} }
]
const router = new VueRouter({
  routes // short for `routes: routes`
})

实现我想要的唯一方法是通过{{$parent.getUser($route.params.id).name}}或{{$root.getUser($route.params.id).name}}

但是我相信每次我显示1个属性值时，它都会不必要地运行该方法。它也很长，我想有一种方法可以将其缩短为{{thisUser.name}}

实现此目标的最佳方法是什么？

我到目前为止所做的尝试：
我试图通过props传递方法，但无法运行该方法。我还尝试过更改函数中的方法。

我尝试的另一种方法是通过<router-view :thisUser2="'users[3]'"></router-view>。那几乎行得通（无法使用该方法），但是它将把此道具传递给每条路线，这不好。我将拥有不需要道具的路线。

Answer 1

正确的方法是使用计算属性：

const User = { 
  props: ['id', 'thisUser'],
  computed:
  {
    userID()
    {
      return Number(this.$route.params.id);
    },
    userData()
    {
      return this.$root.users.find(item => item.id === this.userID);
    }
  },
  template: `
  <div>
    <h3>User data:</h3>
    <h5>$route.params</h5>
      <p> this user id : {{ userID }} </p>
    <h5>$parent & $root + method + $route.params</h5>
      <p> this user name:    {{ userData.name }} </p>
      <p> this user height:  {{ userData.height }} </p>

    <h5>'id' prop</h5>
      <p> id : {{id}} </p>

    <h5>'thisUser' prop, = data_users[2]</h5>
      <p> user3 name:    {{thisUser.name}} </p>
      <p> user3 height:  {{thisUser.height}} </p>

    <h5>$parent & $root</h5>
      <p> user1 name:    {{$parent.users[0].name}} </p>
      <p> user1 height:  {{$root.users[0].height}} </p>

  </div> `
}

如何在vuejs和vue-router中将1条应用程序数据记录传递到路由

1 个答案: