Are these 2 components very similar, with the only distinction being the unique GET request for each? Should we combine them into one?

Question

Are these 2 components very similar, with the only distinction being the unique GET request for each? Should we combine them into one?

There are currently two components in my project that are nearly identical. The HTML structure and CSS rules are the same, with the only difference being the GET request made in the mounted() lifecycle hook. One component fetches all visited places, while the other fetches all wishlisted places. Despite the different data being returned, the response structure is the same for both requests.

My dilemma is whether to merge these two components into one. If I decide to do so, how can I determine which type of data to fetch - visited or wishlisted places? One possible solution could be to base this decision on the URL path, such as checking for

http://localhost:8080/#/Admin/visited

to fetch visited places and

http://localhost:8080/#/Admin/wishlist

to fetch wishlisted places.

Furthermore, what would be an appropriate name for this combined component, considering it will be responsible for fetching both types of places? Additionally, what would be a suitable name for the data property that will replace wishlist and visited?

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

Break down the process of retrieving the information and presenting it. By doing this, the main component can handle the data fetching in its mounted/created hook and then pass it as a prop to the component responsible for displaying it:

<places :places="visited"/>
<places :places="wishlist"/>

Answer 2

Break down the process of retrieving the information and presenting it. By doing this, the main component can handle the data fetching in its mounted/created hook and then pass it as a prop to the component responsible for displaying it:

<places :places="visited"/>
<places :places="wishlist"/>

Answer 3

Answer №2

It is recommended to create a reusable component, possibly named Places.vue. However, ensure that the structure of your returned result remains the same (consider renaming wishlistPlaces and visitedPlaces to places or sights):

The component should accept a source parameter, like this:

<places source="getWishlist" />

And define it in the component as:

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

Your getter function should look something like this:

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

You will also need to update any instances where you are currently using wishlist or visited props/methods to instead use places (or sights if preferred).

Answer 4

It is recommended to create a reusable component, possibly named Places.vue. However, ensure that the structure of your returned result remains the same (consider renaming wishlistPlaces and visitedPlaces to places or sights):

The component should accept a source parameter, like this:

<places source="getWishlist" />

And define it in the component as:

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

Your getter function should look something like this:

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

You will also need to update any instances where you are currently using wishlist or visited props/methods to instead use places (or sights if preferred).

Answer 5

Answer №3

If you're dealing with tabs and want them to be loaded upon creation or mount, then Dynamic <components> is a great option. You can pass props according to your needs. For more information, check out this link: https://v2.vuejs.org/v2/guide/components-dynamic-async.html

Answer 6

If you're dealing with tabs and want them to be loaded upon creation or mount, then Dynamic <components> is a great option. You can pass props according to your needs. For more information, check out this link: https://v2.vuejs.org/v2/guide/components-dynamic-async.html

Are these 2 components very similar, with the only distinction being the unique GET request for each? Should we combine them into one?

Answer №1

Answer №2

Answer №3

Similar questions

The Art of jQuery Data Processing

Using JavaScript and jQuery, apply a class when a specific radio button is checked and the data attribute meets certain criteria

What is the best way to modify the values in an initialized array once the fetchData method has been executed?

One effective method for implementing two-way data binding with Vuex within a list

Utilize client-side script in nodejs to share module functionalities

Creating an AJAX request in Play 2.x by using a shared button

I'm seeking an easy method to adjust the x and y coordinates of a popup rectangle with a fixed size. Can anyone provide

What is the best way to maintain the selected radio button on the following page using PHP?

The ts-node encountered an issue with the file extension in this message: "TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension

Instructions on integrating Realm SDK with Vue3

Setting up React Router in a nested directory with a flexible route structure

An unconventional approach to utilizing Vue CLI for personal projects

Troubleshooting problems with AngularJS placeholders on Internet Explorer 9

Incorporate CloudKit JS into Vue Application

Passing events value in Fullcalendar Plugin by utilizing a javascript function to format events in the Fullcalendar event format

Issue with adding a video to a playlist using Youtube API

Javascript - accessing a local file (located in the same directory as the HTML file, not an uploaded file)

Is it better to have JavaScript and HTML in separate files or combined into a single HTML file?

When attempting to import vue.js within a JavaScript file in a Django application, an error of 'Uncaught SyntaxError: Cannot use import statement outside a module' is encountered

Developing a custom CSS for React using clamp and focus attributes