0

I'm building a small forum app with Laravel and Vue and currently i'm adding filter buttons to fetch threads based on the filter button.

For example, in a Vue component, i have the following button, which essentially makes a get request to the back-end and fetches the threads created by the authenticated user

<a href="/threads?myThreads=1"> My Threads </a>

But in addition to the button above i have other filters as well

  1. Threads i have replied to
  2. Threads that were created 7 days ago

However, i want to hide the clicked buttons based on the query strings

window.location.href

For example if i click the button My Threads, then the href will be

/threads?=myThreads=1

In this case i want to hide the button My Threads, based on the href.

My question

Is this a bad approach ? To make decisions based on the href.

Should i try a different approach ? Such as, passing data from the backend to to front end

Improve this question
5
  • You're not too far off, you just need to add a bit of logic into the component you're building out. Personally, I wouldn't let the href dictate the state of anything; you need to add some functionality in your component to handle the request instead. On 'mounted' you could default the state to all posts, and on button press you could filter that request using a method. Take a look at the official documentation for more info (this is very close to what you're trying to achieve): vuejs.org/v2/cookbook/using-axios-to-consume-apis.html Commented Jul 15, 2020 at 13:03
  • Also, add a data property, i.e. 'queryType:' with v-if to hide or disable buttons depending on the query type. Commented Jul 15, 2020 at 13:11
  • If you mean to take an action based on the axios request then I can’t do that because I return a view from laravel and not a json response. In addition to that some of the buttons that I use are not part of the Vue component but are part of the blade view. Commented Jul 15, 2020 at 16:27
  • Do you suggest then to change the whole structure in order to be able to return a Json response instead of a blade view ? If I do that, then I guess I can make axios requests and act upon the responses. However now that I’m thinking, even if I do that I will still need to access the query strings otherwise how can I manage the state of the buttons ? Commented Jul 15, 2020 at 16:33
  • 1
    Forgive me if I'm completely wrong here, but It sounds like you need to commit to one thing to handle the front end and one thing to handle the back end. Blade view sounds like a templating language for Laravel, which is PHP's version of Vue. I'd stick to using one of these, or fully commit to using Vue as your front end language and Laravel as your backend. Let me know if i've got the wrong end of the stick ;) I found this article might help you: vegibit.com/how-to-use-vuejs-with-laravel-blade Commented Jul 15, 2020 at 16:58

1 Answer 1

Reset to default
1

To get query params,

this.$route.query.myThreads

You can use the snippet to get the query params value.

To hide the button,

<a href="/threads?myThreads=1" v-if="query !== 1"> My Threads </a>

where query is containing the query params.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

That’s a good tip because I wasn’t using vue to get the query strings. However, I am more concerned about but approach, whether it is correct or not. Any other approach is appreciated
Can you give some more idea about the scenario? so i can suggest alternative approach

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.