search

EvanAgee / vuejs-wordpress-theme-starter

A WordPress theme with the guts ripped out and replaced with Vue.
https://vuewp.com/
1.6k stars 282 forks source link

Strange issue with pages #56

Closed giekaton closed 5 years ago

giekaton commented 5 years ago

Quite a strange issue I'm having.

Everything worked fine when I had ~3 pages. Now I created ~13 pages, and when accessing some pages through router-link or direct url, I get the below pasted error.

Then if I recreate with the wp the page(-s) that I can't access, it starts working. But after this, some other page(-s) stops working which was working fine before. Any ideas?

index.min.bundle.js?ver=1551969780:11 [Vue warn]: Error in render function: "TypeError: Cannot read property 'title' of undefined"

found in

---> <Anonymous>
       <Anonymous>
         <Root>
gi @ index.min.bundle.js?ver=1551969780:11
k @ index.min.bundle.js?ver=1551969780:11
e._render @ index.min.bundle.js?ver=1551969780:11
St.o @ index.min.bundle.js?ver=1551969780:11
Aa.get @ index.min.bundle.js?ver=1551969780:11
Aa.run @ index.min.bundle.js?ver=1551969780:11
Rt @ index.min.bundle.js?ver=1551969780:11
(anonymous) @ index.min.bundle.js?ver=1551969780:11
t @ index.min.bundle.js?ver=1551969780:11
Promise.then (async)
e @ index.min.bundle.js?ver=1551969780:11
(anonymous) @ index.min.bundle.js?ver=1551969780:11
It @ index.min.bundle.js?ver=1551969780:11
Aa.update @ index.min.bundle.js?ver=1551969780:11
Hi.notify @ index.min.bundle.js?ver=1551969780:11
set @ index.min.bundle.js?ver=1551969780:11
(anonymous) @ index.min.bundle.js?ver=1551969780:16
(anonymous) @ index.min.bundle.js?ver=1551969780:16
te.updateRoute @ index.min.bundle.js?ver=1551969780:16
(anonymous) @ index.min.bundle.js?ver=1551969780:16
(anonymous) @ index.min.bundle.js?ver=1551969780:16
r @ index.min.bundle.js?ver=1551969780:16
at @ index.min.bundle.js?ver=1551969780:16
(anonymous) @ index.min.bundle.js?ver=1551969780:16
r @ index.min.bundle.js?ver=1551969780:16
(anonymous) @ index.min.bundle.js?ver=1551969780:16
(anonymous) @ index.min.bundle.js?ver=1551969780:16
(anonymous) @ index.min.bundle.js?ver=1551969780:16
h @ index.min.bundle.js?ver=1551969780:16
r @ index.min.bundle.js?ver=1551969780:16
r @ index.min.bundle.js?ver=1551969780:16
at @ index.min.bundle.js?ver=1551969780:16
te.confirmTransition @ index.min.bundle.js?ver=1551969780:16
te.transitionTo @ index.min.bundle.js?ver=1551969780:16
e.push @ index.min.bundle.js?ver=1551969780:16
oe.push @ index.min.bundle.js?ver=1551969780:16
w @ index.min.bundle.js?ver=1551969780:16
e @ index.min.bundle.js?ver=1551969780:11
index.min.bundle.js?ver=1551969780:11 TypeError: Cannot read property 'title' of undefined
    at Proxy.r (index.min.bundle.js?ver=1551969780:16)
    at u.e._render (index.min.bundle.js?ver=1551969780:11)
    at u.St.o (index.min.bundle.js?ver=1551969780:11)
    at Aa.get (index.min.bundle.js?ver=1551969780:11)
    at Aa.run (index.min.bundle.js?ver=1551969780:11)
    at Rt (index.min.bundle.js?ver=1551969780:11)
    at Array.<anonymous> (index.min.bundle.js?ver=1551969780:11)
    at t (index.min.bundle.js?ver=1551969780:11)
giekaton commented 5 years ago

If I load pages list through pages widget, the missing page is not shown

<span>
    <!---->
</span>

If I delete this page, and create a similar new one - it start working, but then some other page stops working.

giekaton commented 5 years ago

Any ideas where to look for the cause? The missing pages can be accessed through /wp-json/wp/v2/pages/{id} or through wp editor, but vue shows the above error and no content.

WP fresh install, no plug-ins, latest vuejs-wordpress-theme-starter version.

pmcp commented 5 years ago

I just tried it out and had the same problem, but got it working!

In src/settings.js: 

API_BASE_PATH: "/?rest_route=/wp/v2/"

I don't kow why, this is another way of reaching the api. I think it has to do with the vue-router intercepting the normal path. But I might be wrong.

AND THEN, because we're using the parameter way of using the REST API, we have to change the axios call to use arguments:

So, in src/api/index.js:

    axios
      .get(SETTINGS.API_BASE_PATH + "pages", {
        params: {
          per_page: '1'
        }
      })
      .then

Or whatever parameter you want.

Hope this helps!

giekaton commented 5 years ago

@pmcp thank you for looking into this.

It was even more simple. I didn't need to change the settings.js (tried, but it didn't work for me). I only needed to change the default per_page limit. Set it to 40 and now everything works fine.

@EvanAgee this can also be included in the FAQ :)

    axios
      .get(SETTINGS.API_BASE_PATH + "pages?per_page=40")
pmcp commented 5 years ago

Ah perfect. Weird, but ok, if it works, it works ;)