I am uncertain about the current status of this project; it functions correctly on my local machine but is encountering issues when deployed on the server

Question

I am uncertain about the current status of this project; it functions correctly on my local machine but is encountering issues when deployed on the server

I'm facing an issue while transferring a project from local to server. The project works fine locally but not on the server, specifically when I try to edit products. The database is not displaying the correct information, as it shows two crucial numbers as 0 even though they are not supposed to be 0 in the database. These numbers are essential for calculating the price.

Here is the information being displayed for a product:

[ { "country": { "id": 1, "name": "COSTA RICA", "currency_symbol": "CRC" }, "country_id": 1, "margin": 0, "fi": 0 }, 
{ "country": { "id": 2, "name": "NICARAGUA", "currency_symbol": "COR" }, "country_id": 2, "margin": 0, "fi": 0 }, 
{ "country": { "id": 3, "name": "HONDURAS", "currency_symbol": "HNL" }, "country_id": 3, "margin": 0, "fi": 0 } ]

However, in the database, the product should have the following margin and fi values:

product_id: 1
country_id: 1
margin: 0.65
fi: 0.50

product_id: 1
country_id: 2
margin: 0.65
fi: 0.50

product_id: 1
country_id: 3
margin: 0.65
fi: 0.50

The edit product function is supposed to mirror the create model, but for some reason, it is not displaying the correct information.

Below is the function responsible for opening the create and edit dialogs:

showDialog(model) {
    // Function code here
}

What could be causing this discrepancy between the local environment and the server?

javascript vue.js

Answer 1

Answer №1

It seems like there could be an issue with how you are comparing values in the filter function. To resolve this, consider parsing the IDs into integers when comparing them. Here is a corrected version of your _formatModel function:

_formatModel(model) {
this.productCategories = [];

this.loadingResource = true;
this.$http.post(this.baseUrl + '/show/' + model.id).then(
    (res) => {
        this.model.export_factors = this.countries.map((country) => {
        let result = res.body.export_factors.filter((item) => parseInt(item.country_id) === parseInt(country.id));
        let margin = 0;
        let fi = 0;

        if (result.length > 0) {
            margin = result[0].margin;
            fi = result[0].fi;
        }
        return {
            country: country,
            country_id: country.id,
            margin: margin,
            fi: fi,
        }
    });
    this.model.prices = this.countries.map((country) => {
        let result = res.body.prices.filter((item) => parseInt(item.country_id) === parseInt(country.id));
        let resultExport = res.body.export_factors.filter((item) => parseInt(item.country_id) === parseInt(country.id));
        let price = 0;

        if (result.length > 0) {
            price = (this.form.cif / resultExport[0].margin) / resultExport[0].fi;
        }
        return {
            country: country,
            country_id: country.id,
            price: price.toFixed(2),
        }
    });
    this.productCategories = res.body.categories.map((category) => {
        category.fields = category.fields.map(item => {
            item.allFields = [item.field];
            return item;
        });
        return category;
    });
    this.form.tags = res.body.tags;
    this.form.sizes = res.body.sizes;
    this.loadingResource = false;
},
(res) => {
    this.loadingResource = false;
    this.dialogVisible = false;
    this.$message.error(parseError(res)[0])
}

) },

Answer 2

It seems like there could be an issue with how you are comparing values in the filter function. To resolve this, consider parsing the IDs into integers when comparing them. Here is a corrected version of your _formatModel function:

_formatModel(model) {
this.productCategories = [];

this.loadingResource = true;
this.$http.post(this.baseUrl + '/show/' + model.id).then(
    (res) => {
        this.model.export_factors = this.countries.map((country) => {
        let result = res.body.export_factors.filter((item) => parseInt(item.country_id) === parseInt(country.id));
        let margin = 0;
        let fi = 0;

        if (result.length > 0) {
            margin = result[0].margin;
            fi = result[0].fi;
        }
        return {
            country: country,
            country_id: country.id,
            margin: margin,
            fi: fi,
        }
    });
    this.model.prices = this.countries.map((country) => {
        let result = res.body.prices.filter((item) => parseInt(item.country_id) === parseInt(country.id));
        let resultExport = res.body.export_factors.filter((item) => parseInt(item.country_id) === parseInt(country.id));
        let price = 0;

        if (result.length > 0) {
            price = (this.form.cif / resultExport[0].margin) / resultExport[0].fi;
        }
        return {
            country: country,
            country_id: country.id,
            price: price.toFixed(2),
        }
    });
    this.productCategories = res.body.categories.map((category) => {
        category.fields = category.fields.map(item => {
            item.allFields = [item.field];
            return item;
        });
        return category;
    });
    this.form.tags = res.body.tags;
    this.form.sizes = res.body.sizes;
    this.loadingResource = false;
},
(res) => {
    this.loadingResource = false;
    this.dialogVisible = false;
    this.$message.error(parseError(res)[0])
}

) },

I am uncertain about the current status of this project; it functions correctly on my local machine but is encountering issues when deployed on the server

Answer №1

Similar questions

What are the steps to utilize an npm package effectively?

Problem with OnClick function in Firefox

I'm looking to achieve a horizontal wrapping alignment of cards in Vuetify 2. How can I accomplish this?

To utilize the span and input text increment functionality, simply use the required input type number and hold either the up or down arrow

Mastering the ins and outs of ngStorage in AngularJS

"Implementing conditional evaluation for pixel units in AngularJS using ng-style

Guide to delivering a PDF document from a controller

Discovering a particular element involves iterating through the results returned by the findElements method in JavaScript

Error occurred during Apple Login using Next_Auth: OAuthCallback issue

What is the best approach for making a drawer resizable?

Lost item phenomenon: conceal information below until it emerges

Placing a dropdown menu on top of an image

Steps for initiating a $.ajax POST request from a client to a server

Setting headers in Node.js after they have already been sent to the client is not allowed

Mapping URLs to objects in JavaScript, TypeScript, and Angular4

When using `shallowMount` in @Vue/test-utils, it displays the message "[Vue warn]: Unknown custom element" when working with Vuetify

React Router relies on a DOM for Browser History to function properly

Error: Unable to locate module '@/components/Header' in Next.js project

Guide on creating a cookie in express following a successful API call

Managing State with Vuex: Storing Getter Results in the State