[Vuejs]-2 components almost identical to each other. The only difference is that each component has a different GET request. Merge them?

by

1👍

✅

Yes, you should make a reusable component, probably called Places.vue. However, your returned result should have the same structure (you have to rename wishlistPlaces and visitedPlaces to places, probably. Or sights):

Your component should take in the source parameter, along these lines:

<places source="getWishlist" />

And map it as:

props: {
  source: {
     type: String,
     required: true
  }
}

while your getter should something like:

mounted() {
    axios.get(`/${this.source}/${this.userName}`)
    .then(response => {
        this.places = response.data.places
    }).catch((error) => console.log(error));
}

You obviously need to refactor all places where you now use wishlist or visited props/methods to use places (or sights, if that’s your choice).

👤tao

2👍

Separate getting the data from displaying the data. The parent can then perform both requests in its mounted/created hook and pass them as a prop to the display component:

<places :places="visited"/>
<places :places="whishlist"/>
👤TommyF

0👍

Take a look at Dynamic <components> it’s good for cases where you have tabs so they are both loaded on creation (or mount) and then you give the props according to the needs. See here: https://v2.vuejs.org/v2/guide/components-dynamic-async.html

👤Michael

Leave a comment