error image
Hi, I am working on Vue js and my all route links working fine but when I want to add a product this error show on the console, update and delete product functionality working fine. There is some problem here when adding product "public" is included in the URL as shown in error. Does someone know about this type of error and solution?
editProduct() {
this.form.put((`/auth/products/${this.form.id}`))
.then(response => {
$('#addNew').modal('hide');
Toast.fire({
icon: 'success',
title: 'Product updated successfully'
});
this.getResults();
});
},
addProduct() {
this.form.post('/auth/products/')
.then(response => {
$('#addNew').modal('hide');
Toast.fire({
icon: 'success',
title: 'Product added successfully'
});
localStorage.setItem('productCount', response.data.products);
this.$emit('loggedIn');
this.products.data.push(response.data.data);
});
},
Above code snippet, edit product working fine but add product throw mixed content error.
Related
I am learning cy.origin concept and found below snippet from internet said it's working good. I am getting an error as unable to find element: #login_field. I've also set true chromeWebSecurity & experimentalSessionAndOrigin but still error. Kindly help to solve.
describe('Test login to Netlify using Github', () => {
it("should login to netlify with github", () => {
// visit netlify
cy.visit("https://www.netlify.com/");
cy.get("#cta-mainNav-login").click({ force: true });
cy.wait(5000)
cy.contains("Log in").click({ force: true });
cy.contains("GitHub").click({ force: true });
// click on 'login with Github' button
cy.origin("https://github.com", () => {
cy.get('#login_field').type("*****#gmail.com");
cy.get("#password").type("********");
cy.get("input").contains("Sign in").click();
});
// should login to netlify and open dashboard
cy.url().should("contain", "https://app.netlify.com/");
});
});
I'm using Vue 2.6.12, Laravel and Inertia.
When using vue-meta to alter the meta title it displays 'undefined' for a split second when loading any page.
Im using Inertia, so the routing is on Laravels side and uses Inertia to pass the Vue component name and data to the frontend.
//app.js
new Vue({
metaInfo: {
titleTemplate: 'Inertia: %s'
},
render: h => h(App, {
props: {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: name => require(`./Pages/${name}`).default,
},
}),
}).$mount(el)
//Index.vue
export default {
metaInfo: {
title: 'User list'
}
}
It generally works, but it seems to stop working while Inertia requests are being processed / recieved / sent.
How do I prevent this?
what I understood that you want to load and manipulate metadata of the html page.
This cannot be manipulated unless you create a slot in the header, or place a prop so that each time you pass parameters to it it changes, with a layout.!
the most ideal thing would be that you use it inside the router:
const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta: {
title: 'Home Page - Example App',
metaTags: [
{
name: 'description',
content: 'The home page of our example app.'
},
{
property: 'og:description',
content: 'The home page of our example app.'
}
]
}
}
i dont expert in english.! will it really help
enter link description here
I can't show my error in my laravel vue js project.
My Controller
return response()->json(['error'=>'You Already Review This Product'], 422);
My Browser response successfully shows the error. The image in the link.
https://i.postimg.cc/yYB8mXmB/error.png
My Vue Component Script
reviewPost(){
this.$Progress.start();
this.review.post('/api/product/review')
.then(response=>{
Fire.$emit('getReview'+this.$route.params.slug);
this.review.reset();
Toast.fire({
icon: 'success',
title: response.data,
});
this.$Progress.finish();
})
.catch(error=>{
console.log(error);
Toast.fire({
icon: 'error',
title: 'Here i want to show my error',
});
this.$Progress.fail();
});
},
Console.log(error) showing this.
Error: Request failed with status code 422
at createError (app.js:702)
at settle (app.js:977)
at XMLHttpRequest.handleLoad (app.js:169)
Now How I Fix This Problem.
I think I understand your problem now. I have had to deal with similar processing myself.
Since it looks like the error returned has the JSON format:
{
"error": "You Already Review This Product"
}
you can add logic similar to this to your 'catch(error)':
.catch(error=>{
console.log(error);
if (error.response) {
if (error.response.status == 422) {
let errorMessage = error.response.data.error;
Toast.fire({
icon: 'error',
title: errorMessage,
});
this.$Progress.fail();
}
else {
console.error("Response contains error code " + error.response.status);
}
}
else if (error.request) {
console.error("No response received so logging request");
console.error(error.request);
}
else {
console.error("Problem with request: " + error.message);
}
});
BTW, I use Axios for calling REST APIs, and I'm not sure if other ways of calling REST APIs may use a different error structure. As you probably know, you can see the error object structure in the console log.
I am currently learning react-native and I am having an issue with fetch request.
It's giving me an error in the image shown below.
**Note: I test the url with react, and it works there. But for some reason it does not work on react-native.
The code:
constructor(props) {
super(props);
this.state = {
isLoading: true,
data: null,
error: null
}
}
componentDidMount() {
return fetch('https://ptx.transportdata.tw/MOTC/v2/Bike/Availability/Taipei?$format=JSON')
.then((res) => res.json())
.then((resJson) => {
this.setState( {
isLoading: false,
data: resJson,
})
})
.catch((error) => {
console.log(error);
this.setState({
error: error
})
})
}
The error is the following:
error description
A few things:
You don't need a return statement in componentDidMount.
When I try to fetch the URL, I got a 401 unauthorized. According to their API docs you need an app id and api key. Are you setting those when making the request?
I have an ember app that I am developing and everything is working fine except when I refresh the page whilst on a nested route eg. /projects/1 I receive the following error:
Assertion Failed: You may not passundefinedas id to the store's find method
I am fairly sure this is to do with the way I have setup my routing but can't seem to reorganise them to fix it.
They look like so:
App.Router.reopen({
location: 'auto',
rootURL: '/'
});
App.Router.map(function() {
this.route('projects', { path: '/'});
this.route('project', { path: '/projects/:id' });
});
Any help would be awesome! Thanks.
My first suggestion for you would be to change :id segment do :project_id - it's how they define it in documentation. So your router code looks like:
App.Router.map(function() {
this.route('projects', { path: '/'});
this.route('project', { path: '/projects/:project_id' });
});
If this doesn't help, create:
App.ProjectRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('project', params.project_id);
},
});
If you still get error with passing undefined to store.find try to console.log(params) and see if project_id is defined there and matches value from URL.