conceal buttons depending on the query parameter

Currently in the process of developing a small forum application using Laravel and Vue, I am working on implementing filter buttons to retrieve threads based on different criteria.

For instance, within a Vue component, there is a button that triggers a GET request to the backend to fetch threads that have been created by the authenticated user:

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

In addition to this button, there are other filters available as well, such as:

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

I am looking to hide the clicked buttons based on the query strings present in the URL:

window.location.href

For example, when the My Threads button is clicked, the href will be:

/threads?=myThreads=1

In such cases, I aim to hide the My Threads button based on the content of the href.

My Query:

Is it problematic to take action based on the URL in this manner?

Would an alternative approach, like passing data from backend to frontend, be more suitable?

javascriptlaravelvue.jsvuejs2

Answer №1

If you need to access query parameters,

this.$route.query.myThreads

This code snippet will retrieve the value of the query params.

To show or hide a button based on the query parameter,

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

Here, the variable query holds the query parameters.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unexpected javascript runtime errors when using Laravel and Vue combination

My current setup involves Laravel 5.8 + Vue 2.5.17 running within a docker container (specifically devilbox) with Apache 2.4 and PHP 7.3. However, I am facing a perplexing issue that is significantly impeding my development progress. Whenever I refresh my ...

phplaravelapachedockervue.js

Substituting characters, backslashes, and double quotes may not function properly

Trying to replace a single backslash \ with two \\, but encountering issues with double quotes. var json = { "DateToday": "2021-08-11", "MetaData": [ { "id": "222" ...

javascriptjsoncsvescaping

How can I retrieve the attributes of a formArray in an HTML document?

Struggling to integrate a reactive Angular form, I'm facing issues accessing the properties of an array in my HTML. This is my first time working with reactive forms and any guidance would be greatly appreciated. Using Angular 10, below is the code sn ...

javascriptangulartypescriptangular-reactive-forms

Activate fancybox after the AJAX content has finished loading

I have a <div> element with the id <div id="displayinformation"> where I am loading content dynamically using Ajax. Some of the loaded content contains links, and I want to display them in a Fancybox lightbox. I have confirmed that the Fancyb ...

javascriptjqueryajaxfancybox

Exploring the Use of async: false in jQuery

Can you tell me if there is a distinction between these two settings: $.ajax({ type: "POST", traditional: true, url: '/adminTask/doAction', async: false, <<<<<<<<<<<<<< HERE data: p ...

javascriptjqueryajax

Change the name of a file to a name chosen by the user while uploading it to an

I'm a beginner when it comes to node.js and I'm facing an issue that I couldn't find a solution for despite looking into various related topics. My problem involves using Node.js on the server side to upload a file and rename it based on a ...

javascriptnode.jsexpressasynchronous

Creating a filter and word replacement method in Android Studio is a useful tool for implementing text transformations

Hello there! I am currently working on developing an application that can recognize voice and convert it into text. I have successfully implemented the conversion and comparison features, but there are specific words that I need to modify or replace in the ...

javascriptjavaandroidandroid-studio

liberating RAM in three.js

My application is loading a large number of meshes. When I try to dispose of old meshes to free up memory, it seems the memory is not actually being released. Am I missing something? Here is a simple example to reproduce the issue: Load 100 large binary ...

javascriptmemorythree.js

Is there a way to utilize a variable as a key within an object?

Can this be done? Take a look at a practical example from the real world: var userKey = "userIdKey"; chrome.storage.sync.set({ userKey: "Hello World" }, function () { chrome.storage.sync.get(userKey, function (data) { console.log("In sync:", ...

javascript

How can I substitute a specific portion of a string with values that correspond to items in an object array?

I am currently working on a task that involves extracting values from objects in a string to perform mathematical operations. While I have managed to retrieve the data and match the values enclosed in brackets, I am facing a roadblock in terms of what step ...

javascriptarraysstring

The ordering of jQuery's each() and load() functions

I am working on a script that iterates over a series of JSON objects representing images. As the loop loads each image, it is appended to an element within my website or application. Although the images are correctly ordered in the JSON, they sometimes ap ...

javascriptjqueryloadindexingeach

Angular integrated with DOJO application

I'm currently working on incorporating Angular into an existing DOJO application. I've set up a plunkr http://plnkr.co/edit/8pgdNwxFoxrDAQaQ4qfm?p=preview, but unfortunately, the angular module is not loading. Can anyone provide guidance on what ...

javascriptangularjsdojo

When working with React JS and the react-select library, I am looking to automatically reset the options to their default value once

I am attempting to disable the select list after unchecking the checkbox and resetting the select value back to default, but currently it is retaining the last selected option. I am utilizing React-select for the select and options in this scenario. APP.j ...

javascriptreactjs

What is the best way to trigger the animation once more if the state remains unchanged?

I'm exploring how to re-animate the shake effect for an incorrect answer, or a flash animation for a correct answer. I've set up 2 Boolean states for the correct and incorrect answers. I know that if the same incorrect answer is entered again, t ...

vue.jsanimate.css

Convert angular-tree-component JSON into a suitable format and dynamically generate checkboxes or radio buttons

Currently, I am using the angular-tree-component for my treeview implementation. You can find more details about it in this reference link. The array structure I am working with is as follows: nodes = [ { id: 1, name: 'root1', ...

javascriptjsonangulartreeview

Issues encountered when retrieving uploaded files and form data from a form through AJAX and sending it to a Laravel backend

Currently, I am developing a form that contains multiple input fields, including an area for file uploads. Once the user clicks the submit button, my goal is to send the form data via an AJAX POST request to the backend system, which happens to be PHP Lara ...

ajaxlaravelfile-upload

The Highchart column chart is triggering the drilldown event multiple times

I have created a column chart using Highchart and I am facing an issue with the drilldown functionality. Whenever I click on a bar multiple times, the drilldown event triggers multiple times as well. This results in the drilldown event being triggered repe ...

javascriptjqueryangularjshighchartshighcharts-ng

Enhancing List Page Functionality with AngularJS/MVC5 Search Feature

As I work on enhancing the List page, my main focus is on implementing a search feature. While the code below effectively displays data in a list format, I am uncertain about how to start incorporating a search functionality into this page. HTML: <bo ...

javascriptangularjsasp.net-mvc-5

Guide to eliminating hashtags from the URL within a Sencha web application

I'm currently developing a Sencha web application and I need to find a way to remove the "#" from the URL that appears after "index.html". Every time I navigate to a different screen, I notice that the URL looks like this: ...../index.html#Controller ...

javascriptwebsencha-touch

Steps to minimize the Bootstrap expanded menu on devices such as iPhone, iPad, Smartphones, tablets, etc. by simply tapping outside of the menu

Hello there! I'm currently working on a website project using Bootstrap framework v2.0.1. One interesting challenge I'm facing is related to the navigation menu behavior on different devices such as iPhones, iPads, tablets, and smartphones. When ...

javascriptjquerycssresponsive-designtwitter-bootstrap-2