when I execute this in created, it works:
axios
.delete('http://localhost:8000/product/10')
.then(response => {
console.log(response);
})
.catch(err => {
console.log(err);
});
however, if I make a button and on submit I call a method that executes the same code it doesn't work, in the back, I get in the console
OPTIONS /product/10 204 0.172 ms - 0
Note that when I press the button the page refreshes and if I click the button several times fast it executes
Edit: I disabled the refresh, and now it works, Is there anything I can do because I want the method to execute even if I refresh.
the template:
<b-form class="mt-5 pt-5">
<b-form-group id="productId" label="Product id " label-form="productIdInput">
<b-form-input id="productIdInput" type="text" v-model="productForm.id" placeholder="enter product id you wish to delete"> </b-form-input>
</b-form-group>
<button type="button" v-on:click="deleteProduct()">Delete</button>
</b-form>
methods:{
deleteProduct() {
// this.$store.dispatch('removeProduct',this.productForm.id);
axios
.delete('http://localhost:8000/product/10')
.then((response) => {
console.log(response);
})
.catch((err) => {
console.log(err);
})
},
}
The delete request sends options first it seems due to cross-origin and then it waits for response to send the real request, when i click a button and the page refreshes the options is sent, however (what i understood) is that the delete request no longer exists to wait for the response, so simply i added a e.preventDefault() in the method
Related
api.service.js
const shop = localStorage.getItem('shopid');
async getProduct() {
return axios.get(API_URL+'/product/all?installation_id='+shop, { headers: authHeader() })
.then((res) => res.data);
}
AppTopbar.vue
<Dropdown v-model="selected" :options="storesLists" #change="onChange" optionLabel="name" :filter="true" />
onChange(event) {
console.log(event.value);
localStorage.setItem('shopid',event.value);
}
here AppTopbar is common for all vue files(ex.products.vue,bill.vue).
if i change dropdown it set to localStorage then get data like id wise(axios.get(API_URL+'/product/all?installation_id='+shop).
its working fine but i only reload then get record.
how to withot reload page call api.services.js externl file.
im search on everywhere information about my questions - not help me.
I would like to solve this issue using v-if (not v-show)
I get orders data from Vuex store
all code work ,then page loaded and mounted and then I click other tabs and going back to current tab
code not work then I reload page on current tab
code work then I reload page on current tab , but without all v-if
I would like to solve without using third-party plugins if possible
<template>
<div class="w-full">
<!--show message div-->
<div v-if="orders.length===0" class="flex flex-wrap">
...
</div>
<!--show table div-->
<div v-if="orders.length!==0" class="flex flex-wrap">
...
</div>
</div>
</template>
computed data
computed: {
orders() {
return this.$store.state.dataList.orders
}
}
// in console.log i get 4 my orders objects (4) [{…}, {…}, {…}, {…}, ob: Observer]
actions:
fetchORDERS ({ commit }) {
return new Promise((resolve, reject) => {
axios.get('/api/data-list/orders')
.then((response) => {
commit('SET_ORDERS', response.data)
resolve(response)
})
.catch((error) => { reject(error) })
})
}
mutation:
SET_ORDERS (state, order) {
state. orders = order
}
one of the forums they wrote that the matter is in mutation, but I cannot understand what exactly and where is the error, pls help
Your basic setup is correct. That v-if should work if the data-flow is correct.
From what you're giving us, I see the following:
In your computed property you're looking at: this.$store.state.dataList.orders
In your mutation you're changing state. orders. This should be state.dataList.orders.
In other words: you should check whether the state has the shape you expect it to have. You can do this with a console.log in the computed property, or one in the mutation.
A method that contains a fetch API call, wont update the user object
I have a login component witch is only active if the object user is null.
The login button activates the method witch activates a fetch with a put request, and gets data back from my back-end. The API call works and gets the wanted data, but when i try to update my object it stays null, so my login component wont disappear.
this is the login component that needs to disappear when the object user updates
<template>
<div>
<div v-if="user === null">
<Login class="login" v-on:check-user="checkUser"/>
</div>
</div>
</template>
This is where i initialize the user object and the method that is suppose to update the said object.
the alert returns the whole object as it should be but the login component isn't disappearing
data(){
return{
user: null,
coupons:[],
shops:[],
}
},
methods:{
checkUser(mak){
alert(this.user);
fetch("http://localhost:8080/kupom/kupoman/user", {
method: "PUT",
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify(mak)
})
.then(response=> {
return response.json();
})
.then(data=>{
this.user=data;
alert(JSON.stringify(this.user));
});
},
I have a method that is called in vue js template. However, when I run the web site, this method is called infinitely
<template>
<div class="strip_list wow fadeIn" v-for="(row, index) in model.data">
<i class="icon_star voted" v-for="(val, index) in getOverallRating(row.id)">
</i>
</div>
</template>
<script>
methods: {
getOverallRating(id)
{
axios.get(`${this.apiReview}?id=${id}`).then(response =>
{
this.overall = response.data
})
return this.overall
}
}
</script>
I expect to give an id of the user, then the method should get an ID send it to the laravel controller, get calculate the rating according the entries in DB and return the result.
So, what you want to do is remove anything that would generate an api call out of your templates loop. What happens is, that every time the data changes, you re-render the template, and since you have an api call in your template, every time you render you request new data, that's why you're getting an infinite loop.
You should store the data you get from the api in a variable, and initiate API calls from outside of the loop.
<template>
<div class="strip_list wow fadeIn" v-for="(row, index) in model.data">
<i class="icon_star voted" v-for="(val, index) in overall(row.id)">
{{val}}
</i>
</div>
</template>
data: () => {
overall: {}
},
methods: {
getAll() {
// loop through all rows and make api request
this.model.data.forEach(r => this.getOverallRating(r.id))
}
getOverallRating(id) {
// make api request
axios
.get(`${this.apiReview}?id=${id}`)
.then(response => {
// and save into overall, where the id is the key
this.overall[id] = response.data
})
},
},
created(){
// initialize loading during create
this.getAll();
}
This can be further improved by not rendering anything 'till all rows are fetched. You could do that by defining another variable in data, that gets populated during getAll, and updated every time the api gets a response. But Ideally you'd be able to call the API for all reviews at once, not one at a time.
I have this custom login form
<template name="login">
{{> alert}}
<form>
<input type="text" name="username" >
<input type="password" name="password" >
<input type="submit" value="Login" >
</form>
</template>
<template name="alert">
{{alert}}
</template>
I want to put error alert if user failed to login. this is the code to trigger alert message.
Template.login.events({
'submit': function(event){
event.preventDefault();
var usernameVal = event.target.username.value;
var passwordVal = event.target.password.value;
Meteor.loginWithPassword(usernameVal, passwordVal, function(err){
if(err){
Session.set('alert','login failed!');
return false;
}
else{
Session.set('alert',null);
}
});
}
});
Template.alert.helpers({
alert:function(){
return Session.get('alert');
}
});
The problem is when I trigger the error and try to open other page and back to login page, the alert message still there. Alert message only disappear when I refresh my browser or login successfully.
How is the best way to use error handling so the alert message only triggered once. This is including other forms error handling.
Thanks before.
You can clear the Session var when you come back to the view, like this:
Template.login.rendered = function () {
Session.set('alert', null);
};
You can define a timeout on your alerts. Define globally in a "app.js" file if you want this behavior for all your alerts. I got this in my meteor app. Your alerts will stay for 6 secs:
Deps.autorun(function() {
if(Session.get('alert')){
setTimeout(function () {
Session.set('alert','');
}, 6000);
}
});