Currently utilizing Vue without the vue-router plugin.
Looking for a method to extract URI parameters?
I came across one approach that involves using the root el property.
https://i.sstatic.net/6Cnkb.png
However, I am seeking a more appropriate way to retrieve these parameters as they need to be sent to the backend for server response and display purposes.
Without using vue-router, accessing params may be tricky. One workaround is to utilize the URL API like this:
const url = new URL(window.location.href);
const getParam = url.searchParams.get('foo');
This code snippet will fetch the value of 'foo' from a URL like ?foo=bar
Alternatively, you can consider implementing the following approach:
new Vue({
el: '#app',
data () {
return {
params: window.location.href.substr(window.location.href.indexOf('?'))
}
},
methods: {
getParam (p) {
let param = new URLSearchParams(this.params);
if(param.has(p)){
return param.get(p)
}else{
false
}
}
},
})
To retrieve the parameter, simply call getParam('foo')
To retrieve the URL parameters, you can use window.location.search:
const queryString = window.location.search;
console.log(queryString);
// ?category=shoes&brand=nike&color=blueIf you need to parse the parameters from the query string, utilize URLSearchParams:
const urlParams = new URLSearchParams(queryString);For further information, refer to this guide.
Currently, we are not utilizing the vue router. Instead, we have implemented a custom script to handle argument parsing.
var args = {};
var argString = window.location.hash;
//everything after src belongs as part of the url, not meant for parsing
var argsAndSrc = argString.split(/src=/);
args["src"] = argsAndSrc[1];
//everything before src constitutes arguments for this page.
var argArray = argsAndSrc[0].split("?");
for (var i = 0; i < argArray.length; i++) {
var nameVal = argArray[i].split("=");
//removing any hash symbols
if (i == 0) {
var name = nameVal[0];
nameVal[0] = name.slice(1);
}
args[nameVal[0]] = decodeURI(nameVal[1]);
}
Discover the properties of routes within this.$route.
this.$router represents the router object instance that provides routing configurations.
Retrieve the current route query by accessing this.$route.query
I found a similar question on stackoverflow and was able to derive my solution from there. However, I am facing a slight issue with it. In my case, I have a small fixed submenu at the top of the page. When I click on an anchor link, I want the scroll posi ...
Below is the html structure in question: <script> function process(){ //how to get attribute window.allert(attr); } </script> <div attr="234234"> <div onclick="process()">some content</div> </d ...
Currently, DerbyJS (visit http://derbyjs.com) functions by replacing everything in the body tag of the document each time a link is clicked. Is there a way to utilize the template, but replace only the content inside #main-content instead of refreshing th ...
Currently, I am working on a website that utilizes multiple backgrounds layered on top of each other using Sass and Bootstrap. However, I am encountering a problem in the mobile view where users can scroll horizontally, which is not desired. Additionally, ...
My goal is to dynamically add a class to specific elements based on the presence of another class in elements below them. Consider the following code snippet: < p class="my-paragraph">This is a sentence.</p> < p class="my-par ...
<template> <div> {{ id }} {{ title }} </div> </template> <script> import { useRoute } from 'vue-router' import 'firebase/firebase-firestore' import { db } from '@/fdb' export default ...
I'm currently working on a quiz project where I fetch an API containing quiz questions and answers. The API provides an array of wrong answers (3) along with one correct answer. My goal is to display these options as buttons, so I decided to push the ...
When working with tabular content generated using ng-repeat in AngularJS, it is important to find a way to display this content within an iframe. The goal is to allow users to drag and resize the content as needed. However, using the iframe src attribute ...
As I delve into the Vue.js guide, a particular statement catches my attention. The Vue.js Template expressions adhere to strict sandboxing and are limited to a whitelist of global variables such as Math and Date. It is advised not to try accessing user- ...
I am looking to implement tooltip messages for the save and cancel buttons in Ext.ux.grid.RowEditor. For example, I want the save button to have a tooltip that says "Save the records" and the cancel button to have a tooltip that says "Cancel saving the rec ...
I'm currently facing an issue with the Intersection Observer API. My goal is to trigger an animation when the intersectionRatio reaches at least 40%. Here's the code I'm using: if(entry.intersectionRatio > 0.40){ DO SOMETHING } Howeve ...
Is there a way to retrieve the abbreviated names of each day of the week in JavaScript, starting from Monday through Sunday? ...
Working on my react-based project, I've integrated the node-poweredup npm package to enhance functionality. This useful library comes in both a nodejs and browser version. To include the browser version in my app, I simply link the script located at j ...
I am currently working on retrieving a list of JSON objects (products) from a local file using Jquery and then storing all of these objects in a single array named allItems. The file is located in the same directory as the code, and it is named "allItems.j ...
I am experimenting with running Selenium and headless Chrome in a Docker container for testing purposes. Previously, I successfully ran Selenium in headless Chrome outside of my Docker container using the code snippet below in my .js file: const client = ...
I recently updated to webpack 4 and I am utilizing css modules. Encountered ERROR: ERROR in ./client/src/common/accordian-component/accordian.css (./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??ref--5-2!./client/src/common/acc ...
I am currently integrating a script for hover-functionality: function VerifyImage(url) { var httpRequest = new XMLHttpRequest(); httpRequest.open('HEAD', url, false); httpRequest.send(); return httpRequest.status != 404; } The c ...
Hey there, I have a question about using jquery textcomplete. It seems like a simple task, but I'm not sure how to accomplish it. I've created a DEMO without jquery as reference. My question is this: How can I make the .textBox div automatical ...
I've been struggling for hours trying to figure out how to select a div that contains a specific p element. HTML <div class="NavBar_Row_Button2"><p>DONATE</p></div> <div class="NavBar_Row_Button2"><p>CONTACT</p ...
Presented here are a series of buttons to choose from: <button id="hdfs-test" type="button" class="btn btn-default btn-lg">HDFS</button> <button id="hive-test" type="button" class="btn btn-default btn-lg">HIVE</button> <button id ...