VueJs передает пустой объект Prop в субкомпонент - PullRequest
Новая
       23

VueJs передает пустой объект Prop в субкомпонент

0 голосов
/ 03 ноября 2019

У меня есть компонент UserProfile со следующими данными, который прекрасно работает: 

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

У меня есть подкомпонент UserItems, который я хочу вызвать с подпоркой для this.user

, например:

<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?

...