I got env.variable below VUE_BASE_API=http://111.123.144.45:5331 (example), after that I export this variable as baseAPI and I want to concatinate with path: '/api/Users/GetUser?Name=' and value from input-> userSearchInputValue.
When I try to concatinate those 3 while I try to fetch data, I fail and get error below in console where between concatinating I get undefined, where it comes from?
Error
<input
v-model="userSearchInputValue"
type="text"
name=""
id=""
placeholder="User"
#keyup="searchUser(userSearchInputValue)"
/>
searchUser(userSearchInputValue) {
axios
.get(
baseAPI + `/api/Users/GetUser?Name=${userSearchInputValue}`
)
.then((data) => {
console.log(data.data);
})
.catch((error) => {
console.log(error);
});
},
Can someone help? Is this somehow possible?
As answer to this issue, I found out that you should restart your serve after declaring ENV variables - didn't knew this..
Related
Particular user Details
invoice_info: [],
this.$http.get(`/api/invoice-generator-retrieve/${nid}/`)
.then((res) => {
this.invoice_info = res.data.data;
console.log(res.data.data, "State", this.invoice_info.invoice_generator_id)
}).catch((err) => {
console.log(err);
})
Storing below data in the invoice_info[],
invoice_generator_id:5
is_paid:false
total_amount:7000
total_tk:7150
updated_at:"2023-01-25T16:17:15.187859"
user_id:4656
<h5 class="modal-title font22think ml-4" id="exampleModalLabel" >${
this.invoice_info.user_id }</h5>
On Modal ${ this.invoice_info.user_id } is showing instead the result should be 4656
any idead to fix this issue?
Since my above code failed to work accordingly I managed them to work by getting the element by Id and inject the value.
I'm doing a get method, when i run the code i'm getting this Did not attempt to load JSON data because the request Content-Type was not 'application/json'.. I have tried to set headers. Here is my code.
<template>
<div class="container">
<button #click="SearchTown"> Search Town </button>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'SearchTown',
props: {
messege: String
},
data(){
return{
search: [],
}
},
methods :{
SearchTown() {
axios
.get('https://david.darwinist.io/proxy/5000/town/',{headers:{'content-type':'application/json'}})
.then((response) => {// checking response in the console
console.log(response.data)})
.catch((error)=>{
console.log(error)
})
}
}
}
</script>
I'm having 400 error code. I need help.
This is my backend code
def getTown(session, town_dict):
try:
town = (
session.query(Town)
.join(Town.county)
.join(County.nation)
.where(County.name == town_dict["county"])
.where(Town.name == town_dict["name"])
).one()
town_county = copy.copy(town).__dict__
del town_county["_sa_instance_state"]
town_county["county"] = town.county.name
town_county["nation"] = town.county.nation.name
return town_county
except MultipleResultsFound:
return "bad Gateway!", 502
except NoResultFound:
return "Results not found!", 404
I'm not really sure if i have to change my query. Kindly advice.
As commented in this GitHub issue:
https://github.com/axios/axios/issues/86#issuecomment-136505548
https://github.com/axios/axios/issues/86#issuecomment-139638284
Your GET request must have some data passed along it. data: {} should do the trick.
Some people find it kind of misleading. The explanation for this behaviour is here:
Content-Type describes what format the request data is in. If there is no request data, there is no need to specify the Content-Type.
Could someone tell me what is wrong with this setup, where I want to load a config.json file before the vue app is created and access the config in the components with this.$root.config. There is no root config element I can access? Missing something? Thanks for your help! The config.json file is correctly loaded, can log the config to the console. But it is not added to the root properties from Vue?
fetch('/config.json')
.then(res => res.json())
.then(config => {
createApp(App, {
data() {
return config
},
created() {
console.log(this.$root.config);
}
}).use(store).use(router).use(i18n).mount('#app');
});
What you place in data won't be found in $root but, as Abdelillah pointed out, in $root.$data. Since App is the root component, though, you can just use this.config. In any subcomponent, you'd have to use this.$root.$data.config.
But Vue 3 provides a cleaner alternative to provide data to any component in your app: config.globalProperties.
Example:
const app = Vue.createApp({});
app.component('test', {
mounted() {
console.log(this.config);
}
});
Promise.resolve({
foo: 'bar'
}).then(config => {
app.config.globalProperties.config = config;
app.mount('#app');
});
<script src="https://unpkg.com/vue#next/dist/vue.global.prod.js"></script>
<div id="app">
<test />
</div>
As you can see, logging <test>'s .config outputs the globalProperty.config set on the app, and it's going to be the same for any component in the app.
If you want to provide data to any descendants of current component (no matter how deep, skipping intermediary parents), you could use provide/inject. While I find this particularly useful for providing some data to all the children of a particular component (and not to the rest of the app's components), it can obviously be used on the root component, which would make the provide available cross-app via inject wherever you need it.
there is no property called config on your data, what you are doing is simply returning the JSON object you imported, you should be doing:
fetch('/config.json')
.then(res => res.json())
.then(config => {
createApp(App, {
data() {
return {
// config: config
config
}
},
created() {
console.log(this.$root.$data.config);
// or console.log(this.config);
}
}).use(store).use(router).use(i18n).mount('#app');
});
I have an array in my Vuex store called Projects. I want to loop through these projects and default to the first item. I have setup a v-model on this select input so I can use the chosen result in my local component.
I read on this SO how I can use v-modal to do this.
However because I populate via Vuex store I think I need to do differently.
So I made my Vuex action I call a promise so in my component I can determine when it has resolved, so I can then populate my local component data (and thus the select input).
loadData: ({ commit }, payload) => {
return new Promise((resolve, reject) => {
// get projects on load
axios
.get("/api/projects/")
.then(function(response) {
commit("updateProjects", response.data);
resolve();
})
.catch(function(error) {
// handle error
throw error;
});
});
};
Then in my local component I have the following triggered on created():
created() {
this.$store
.dispatch("loadData")
.then((this.modalCreate.project = this.projects)); // dispatch loading
}
And within my component I have the following:
<select class="form-control" v-model="modalCreate.project">
<option
v-for="(project, index) in projects"
:value="project"
:key="project.id"
>
{{ project.name }}
</option>
</select>
In the above I have used mapState to map my store.projects to local projects.
In this setup I can see the select options populated from the local projects (from Vuex) but I cannot get the select form to default to the first index.
I suspect this is because I have not correctly made my modalCreate.project the first store.project object. Currently my modalCreate.project is undefined.
Most grateful for any advice on how to best achieve this and whether mapping Vuex state to local state is over-engineering a solution.
--
Perhaps this cloning solution can be applied? I had no luck though: SO Link
I suppose you want to select the first project (index === 0) as your default project:
created() {
this.$store
.dispatch("loadData")
.then(() => {
this.modelCreate = {
...this.modelCreate,
project: this.projects[0]
}
});
}
I know there are similar questions to this but i've tried the solutions and nothing seems to be working
My code takes user input, makes a axios get request based off that input and aims to assign the data to the array staffs[]
export default {
data(){
return{
staffs: [],
userInput:'',
errors: '',
}
},
created:function(){
bus.$on('search-data',inputData =>{
axios.get('http://localhost:4000/stafftest?username='+inputData)
.then(response => {
console.log(JSON.stringify(response.data))
this.staffs = response.data.data
})
.catch(error =>{
console.log(error)
})
})
},
}
Similar issue to what everyone else has asked, the axios request is made successfully but it won't assign data to the array
Here's a combo of things i tried:
https://codeshare.io/ammpP4 https://codeshare.io/G798xD
https://codeshare.io/2Ewk1P https://codeshare.io/GqDPPk
https://codeshare.io/GLbwwp
tried changing it to function(response) etc and having a var self=this, yet none of it seems to work
I even set up another test page which queries a pokemon API and the data assigmemt went smoothly, which leaves me confused as to why in this case on this certain page it won't work
Appreciate any ideas to get this fixed
Thanks