Computed property not firing on page load - New issue, no code changes

I have been through dozens of issues that sound similar to mine, but none have solved my problem. I have a code base that has been running in production for 2 years now without any code changes. We just moved the app to a new server (Did not recompile any CSS or JS during this move) and now are experiencing an issue that’s driving me crazy. To complicate matters, the code runs perfectly in local dev, but in production it doesn’t. Hopefully someone more knowledgeable with Vue can help me diagnose.

I have the following computed property. It is used to generate a select dropdown with filtered values. The idea is that when category_id changes, this computed property updates the manufacturers select dropdown.

filteredManufacturers() {
            for (var i = 0; i < this.categories.length; i++) {
                if(this.categories[i].id === this.category_id) {
                    return this.categories[i].manufacturers;
                }
            }
        },

In our created method, we MAY populate category_id, depending on the values that are passed in:

created() {
        if(!this.isNew) {
            this.address = this.listing.address;
            this.category_id = this.listing.category_id;
            this.manufacturer_id = this.listing.manufacturer_id;
            this.city = this.listing.city;
            this.state = this.listing.state;
        }
    }

The data is being set fine when the page loads. In other words, if we pass a category_id and manufacturer_id into the component, those vars are set correctly on pageload, but filteredManufacturers is not updated when this happens.

I have spent hours on troubleshooting this and just can’t figure out what’s going on - Made even more difficult since it works on the development server. Any advice is much appreciated.

What options are available for debugging on the production server? Can you deploy source maps or non-minified code? Temporary console logging? I just want to get a sense of how limited we are before suggesting concrete steps.

The properties that are set in created, are they all defined in data? In particular category_id.

Are you sure that filteredManufacturers is not updating? Is it possible that it is updating, just to the wrong value?

Did this migration involve moving the data server and/or database? Is it possible that some small differences may be occurring in the data returned from the server? Are you using the same data server for local testing?

I can put production into development mode and shoot you access info, if you want to take a look. In answer to your questions,

  1. Yeah, all of the properties set in created are defined in the data array.

  2. filteredManufacturers fires as soon as category_id changes, so in that sense, it’s working great. The problem is that it’s not working on initial page load. So the page loads, category_id is null. Then in created it’s set to the right value, but filteredManufacturers doesn’t update when that happens. After the page loads, if I change category_id, filteredManufacturers fires immediately and correctly. Vue devtools (In production) shows me that the data is set correctly on page load, so it doesn’t make sense that filteredManufacturers isn’t updating.

  3. Yes, the move involved moving the database, but the data types returned are identical to local dev, so far as I can tell.

Really appreciate your help. Let me know if you’d like to take a closer look and I can privately shoot you some access credentials.

What about this.categories? Where is that coming from? Is it loaded from the server? Is it defined in data (or somewhere else suitably reactive)? Could it be a race condition, with this.categories not being available yet?

If possible I suggest putting some console logging at the start of filteredManufacturers and logging both this.category_id and this.categories.length.

categories is a prop and is passed through the HTML (IE it’s present from the very beginning of the page load)

With some careful console logging, I was able to figure out the issue. I do not know WHY it’s posing a problem, but the strict comparison if(this.categories[i].id === this.category_id) { was where it was falling apart. Vue Devtools showed that both category_id and categories[i].id are both ints, so I’m not sure why the comparison was failing, but changing to == instead of === fixed the issue.

Thanks for sticking with me on this. Without debugging in the console (Not sure why I didn’t think of doing that), I would’ve been at this for days.

I suggest you keep digging. Changing === to == is not a proper solution and doesn’t explain why it suddenly started happening. Without tracking down the underlying cause you’ll likely hit further problems.

Ignore Vue Devtools. Use some more console logging to get to the bottom of it.

For now, leave in the ==. Then, inside the if block put some console logging for typeof this.categories[i].id and typeof this.category_id. Compare that to what’s logged locally. One of them will have the wrong type and once you know which one you can work back to wherever that value is coming from. My guess would be that you’re being fed the wrong type from your server.

Thanks for leading me down the right path. I was able to look closer at this today, and figured out the problem. The PHP mysql driver casts ints to strings. The mysqlnd driver leaves them alone. You can see the problem here, I’m sure. In local dev, we were using the mysqld_pdo driver, but in production, it was the mysqli_pdo driver. Switching the drivers allowed strict type comparisons to function correctly again.