I have a Vue app which needs to remove query parameter from url. Url looks like http://localhost:8080/campaigns/279707824dd21366?screenshot=1 Needs to remove screenshot param without redirect. So I found solution which looks like this:
if( this.$route.query.screenshot ) {
this.screenshot();
const query = this.$route.query;
delete query.screenshot;
this.$router.replace({query: null}).catch((error)=>{
console.log(error);
});
}
This throws me an error without redirect:
NavigationDuplicated: Avoided redundant navigation to current
location: "/campaigns/279707824dd21366?screenshot=1".
I also tried this:
if( this.$route.query.screenshot ) {
this.screenshot();
const query = this.$route.query;
query.screenshot = null;
this.$router.replace({query});
}
What is wrong with this code? Thanks for any help.
Related
I'm using WebdrivreIO(v7) but unable to export $$ value from another file. If I'm working with the same file it's working fine, but another file not working. not sure what's wrong here
sample.js
module.exports = {
details: $$('.agent-rows p.name'),
}
script_file.js
When("Getting the list from the listing page"){
const sample=require("./sample.js");
console.log("value 1"+ await sample.details) // Output : nothing empty
console.log("value 2"+ await sample.details[0]) // Output : undefined
}
are you sure you are not doing any thing between constant sample, console.log lines? require will trigger the details property as soon as you call it .
so if you are trying the below thing , it won't work
const elem = sample.details
//do something for the element to be present
(await elem)[0].dosomething
because sample.details will trigger the fetch process before the element is present. await is used to wait for an async process to complete, not to trigger it.
use instead:
module.exports = {
details: ()=>{$$('.agent-rows p.name')},
}
in code:
const elem = sample.details
//do something for the element to be present
(await elem())[0].dosomething //here you are triggering the fetch
It seems you have a typo s. It should be sample.detail not sample.details.
When("Getting the list from the listing page"){
const sample=require("./sample.js");
console.log("value 1"+ await sample.detail) // 'detail' not 'details'
}
Im having issues with delete request, my post, get are working fine.
What am I doing wrong?
removeUser(id) {
axios.delete('https://jsonplaceholder.typicode.com/users' + id)
.then(function(response) {
const user = response.data;
this.users.splice(id, user);
});
if response.status === 204, then delete is succeed.
for the client, here is an axios example, notice there is a ' after users
destroy() {
return request.delete('/api/users/' + id)
}
for the server, here is an Laravel example:
if( $article->delete() ) {
return response()->json(null, 204);
} else {
abort(409);
}
I can see only 1 problem on the code you provided.
You're trying to modify the Vue instance $data users object by executing this.users.splice(id, user);. But you're inside the callback function and this no longer represents the Vue instance.
To fix this & make the users object actually modify after the response comes you'll need to do it like this :
removeUser(id) {
let that = this;
axios.delete('https://jsonplaceholder.typicode.com/users' + id)
.then(function(response) {
const user = response.data;
that.users.splice(id, user);
});
Now , I don't have any code from the back-end so I'll just make some assumptions :
The route might not be well defined > if you're using NodeJS then you should check your routes , it should look like this :
router.route('/users:id').delete(async function(req,res,next){ /* ... */ });
You might have a route problem because / is missing before the user value
1 hint : Again , if you're using NodeJS , you could use this inside your .delete route :
res.status(200).json({ errorCode : null , errorMessage : null , users : [] });
To see if you're receiving it on front-end.
I think you do need to append the trailing '/' to the URL, that way the URL is properly formed, such as "https://jsonplaceholder.typicode.com/users/123" (rather than "users123" at the end).
Aside from that, the first parameter to Array.prototype.splice is the position where item removal should begin. The second (optional) parameter, deleteCount, is the number of items to remove. Beyond deleteCount, you can pass a collection of objects which are to be inserted after the start position and after items have been removed.
You just need to find the object in your this.users array and remove it. If you want to use Array.prototype.splice for that, then you can use Array.prototype.findIndex to find the index of the user in the array then remove it:
// Find the index of the item to remove
const indexOfUserToRemove = this.users.findIndex(u => u.id === id);
// Call splice to remove the item
this.users.splice(indexOfUserToRemove, 1);
I am new to Vue and I have created a project where I perform GET-requests based on current URL.
I have a function where I want to be able to set the dynamic value of filterType to the query key inside the router.push().
The function I have now just pushes filterType as a string. Ive been researching and havent found any answers regarding this issue. Grateful for any input or wisdom.
setFilter(filterType, filterValue){
if(filterValue){
this.$router.push({ query: Object.assign({}, this.$route.query, { filterType: filterValue })}).catch(err =>{});
}
else {
let query = Object.assign({}, this.$route.query);
delete query.filterType;
this.$router.replace({ query }).catch(err =>{});
}
},
Assign it as a key to the query object:
if(filterValue){
const query = this.$route.query
query[filterType] = filterValue
this.$router.push({path:'/', query:query})
}
Try this code
let newQuery = {filterType: filterValue};
this.$router.push({name: 'route-name', query: {...this.$route.query, ...newQuery}})
I need to generate a vue-router link that contains an array with string keys as a query parameter.
I want the resulting URL to look like
url?param[key]=value
I need these kinds of query parameters to match an existing backend infrastructure, so renaming/refactoring them is not an option.
I've tried to use a router-link like the one below, but the param object just get's serialized as %5Bobject%20Object%5D. Maybe there is an option to change the way this object is serialized within vue-router?
<router-link :to="{name: 'xyz', query: {param: 'value'}}">link</router-link>
Does anyone have helpful input? Thank you :)
After spending some time vue-router GitHub issues and their docs, I figured it out.
When creating your RouteConfig, import qs and set the parseQuery and stringifyQuery methods as follows:
parseQuery: (query: any): object => {
return qs.parse(query);
},
stringifyQuery(query: any): string {
let result = qs.stringify(query, {encode: false});
return result ? ('?' + result) : '';
}
It is important to include {encode: false}, otherwise the square brackets will get URL encoded.
Addition to Martin's comment,
Exact Router config should be :
// https://github.com/ljharb/qs
import qs from 'qs';
const router = new Router({
routes: [
// ...
],
// set custom query resolver
parseQuery(query) {
return qs.parse(query);
},
stringifyQuery(query) {
var result = qs.stringify(query);
return result ? ('?' + result) : '';
}
});
and query parameters inside routes will be automatically converted url string and parsed as an object when accessing $router.query .
I have posted about this previously but still struggling to get a working version.
I want to create a sharable link from my app to a screen within my app and be able to pass through an ID of sorts.
I have a link on my home screen opening a link to my expo app with 2 parameters passed through as a query string
const linkingUrl = 'exp://192.168.0.21:19000';
...
_handleNewGroup = async () => {
try {
const group_id = await this.createGroupId()
Linking.openURL(`${linkingUrl}?screen=camera&group_id=${group_id}`);
}catch(err){
console.log(`Unable to create group ${err}`)
}
};
Also in my home screen I have a handler that gets the current URL and extracts the query string from it and navigates to the camera screen with a group_id set
async handleLinkToCameraGroup(){
Linking.getInitialURL().then((url) => {
let queryString = url.replace(linkingUrl, '');
if (queryString) {
const data = qs.parse(queryString);
if(data.group_id) {
this.props.navigation.navigate('Camera', {group_id: data.group_id});
}
}
}).catch(err => console.error('An error occurred', err));
}
Several issues with this:
Once linked to the app with the query string set, the values don't get reset so they are always set and therefore handleLinkToCameraGroup keeps running and redirecting.
Because the URL is not an http formatted URL, it is hard to extract the query string. Parsing the query string returns this:
{
"?screen": "camera",
"group_id": "test",
}
It doesn't seem right having this logic in the home screen. Surely this should go in the app.js file. But this causes complications not being able to use Linking because the RootStackNavigator is a child of app.js so I do not believe I can navigate from this file?
Any help clarifying the best approach to deep linking would be greatly appreciated.