Question

我有一个UserProfile组件，其数据如下工作正常：

export default {
  name: 'UserProfile',
  data () {
    return {
      user: {}
    }
  },
...

我有一个子组件UserItems，我想用this.user的道具来调用

like：

<UserItems :user="this.user" \>

当我将this.user硬编码为{id：1}时，一切都在下游工作

但是，否则，UserItems组件接收到一个空对象。

这是我的UserItems组件：

<template>
  <div class="row">
    <div class="col-12">
      <NewItem  v-on:item-created="getOwnedItems(user.id)" />
      <h6 class="text-muted mt-3">Your Items:</h6> 
      <ul class="list-group">
        <Item v-for="(item, i) in items" :key="`${i}-${item.id} `" :item="item" v-on:item-deleted="getOwnedItems"/>
      </ul>
    </div>
  </div>
</template>

<script>
import Item from "@/components/Items/Item";
import NewItem from "@/components/Items/NewItem";

export default {
  name: "UserItems",
  props: {
    user: {
      type: Object,
      required: true
    }
  },
  components: {
    Item,
    NewItem
  },
  mounted() {
    this.getOwnedItems();
  },
  computed: {
    items() {
      return this.$store.state.ownedItems;
    },
  },
  methods: {
    getOwnedItems () {
      console.log('getting owned items')
      console.log('this.user is: ', this.user)
      this.$store.dispatch("getOwnedItems", this.user.id);
    }
  }
};
</script>

这是axios请求：

fetchOwnedItems (params) {
    console.log('services params is: ', params)
    return axios.get('items/by_user/' + params)
  },

这是快递路线：

router.get('/by_user/:id', auth.required, async (req, res) => {
  console.log('this is params on getOwned items', req.params)
  const items = await Item
    .query()
    .where('users_id', req.params.id)
    .orderBy('title');
  res.json(items);
});

Vue控制台显示： this.user is: {__ob__: Observer}

如何从UserProfile中传递同一用户？

VueJ将空的Prop对象传递到子组件

0 个答案: