Link menu tabs to url - vue error
sagivf opened this issue · 7 comments
@grantcarthew perhaps you can you help me out here:
I'm trying to attach the tabs to the url/router :
https://sagivf.github.io/rjq-ui/public/#/queues/Registration Emails/active.
using a url with / in the middle seems to brake vue:
Error: Syntax error, unrecognized expression: #/queues/Registration%20Emails/waiting
Tried doing it programmatically, but failed:
https://codepen.io/rogerpence/post/programming-foundation-6-s-tab-component.
Opened a branch with the broken link:
https://github.com/sagivf/rjq-ui/tree/sync-tabs-router
You need to use the <router-link> element for the vue-router Single Page App router that is used with Vuejs.
Have a look at the App.vue links as an example.
Sorry I don't have time to try it out at the moment.
No worries, not urgent.
The branch I created does use <router-link>
The issue is with Foundation
Running - $(this.$el).foundation() on the element throws an error.
VM178:195 Error: Syntax error, unrecognized expression: #/queues/Registration%20Emails/waiting
at Function.Sizzle.error (eval at <anonymous> (app.js:879), <anonymous>:1586:8)
at Sizzle.tokenize (eval at <anonymous> (app.js:879), <anonymous>:2238:11)
at Sizzle.select (eval at <anonymous> (app.js:879), <anonymous>:2665:20)
at Function.Sizzle [as find] (eval at <anonymous> (app.js:879), <anonymous>:890:9)
at jQuery.fn.init.find (eval at <anonymous> (app.js:879), <anonymous>:2921:11)
at jQuery.fn.init (eval at <anonymous> (app.js:879), <anonymous>:3031:32)
at jQuery (eval at <anonymous> (app.js:879), <anonymous>:98:10)
at HTMLLIElement.eval (eval at <anonymous> (app.js:1319), <anonymous>:8839:29)
at Function.each (eval at <anonymous> (app.js:879), <anonymous>:368:19)
at jQuery.fn.init.each (eval at <anonymous> (app.js:879), <anonymous>:157:17)
Ok found the problem.
To fix the issue you need to create the panel content as a new .vue component and pass init values to them.
I'll push some comments and minor changes so you get the idea.
Checkout #3
Use the Vuejs props feature to pass an array of jobs to the JobDetail component. Or, better yet, create a JobList component and put JobDetail inside that. That would make more sense.
Using a nested components is a good idea, but that not the issue I had here.
The issue is I can't use a full url, like - http://localhost:8084/#/queues/Registration Emails/active to change a tab, if you use anything with / in the href then foundation goes crazy (really? an herf?). The error is in my comment above.
The original issue had malformed html though. Compare it to the tab component on the foundation site.