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.
Related
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..
I have a form in one component. After the submit-ion i am redirecting the view to the list where new submit should display.
But is doesn't.
I have to refresh the page and then the change will appear.
How do I instruct the page to reload the content after it is updated
Currently, in order to change the route, I am using:
methods: {
submitMovie () {
movieService.submitMovie(this.newMovie)
.then( this.$router.push('/movies'))
.catch( e=> { this.errors.push(e) })
}
.then(() => { this.$router.push('/movies') })
Thanks Phill.
I was trying to solve this for about 2 days.
All it needed was a function inside next.
Why I still don't understand but I will research about the issue
Thanks Again
I am using Vue (server side rendered) with mjml to generate emails.
So I have something (overly simplified) like:
<mjml><mj-body>Hello {{ User.Name }}</mj-body></mjml>
If the model doesn't define User then Vue throws an error and the whole output is lost.
What I want to the output to be along the lines:
<mjml><mj-body>Hello <error>'User' is undefined</error></mj-body></mjml>
I have implemented Vue.config.errorHandler but that just tells me about the error -- there is no rendered output.
Anyway to implement the equivalent of an error handler around each variable substitution?
If you are using Vue version >= 2.5, you can use errorCaptured to create an ErrorBoundary
const ErrorBoundary = {
name: 'ErrorBoundary',
data: () => ({
error: false,
msg: ''
}),
errorCaptured (err, vm, info) {
this.error = true
this.msg = `${err.stack}\n\nfound in ${info} of component`
},
render (h) {
return this.error
? h('pre', this.msg)
: this.$slots.default[0]
}
}
and use this in your component
<error-boundary>
<mjml><mj-body>Hello {{ User.Name }}</mj-body></mjml>
</error-boundary>
If the application has any javascript error, it will be displayed on UI
Example on codepen
If you want to have more user-friendly error, you can customize ErrorBoundary to have fallback to another component. You can find out in this tutorial
Another good example of using errorHandler
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
So I've run into an weird issue, maybe I'm doing something wrong here but I haven't had this problem before and my app is full of similar code.
Basically I'm trying to do a simple Firestore get() in a function attached to a button onPress. For some reason the code is not run, or if it is I'm not getting any feedback. If I put the same code in componentDidMount it runs and gives me the database snapshot.
Here are the two bits of code in question.
updated for the current binding I am using
this.usersRef = firebase.firestore().collection('users');
componentDidMount() {
this.usersRef
.get()
.then((snapshot) => {
console.log('TEST didMount snapshot', snapshot);
}).catch((error) => {
console.log(error)
});
}
submitSearch() {
console.log('submitSearch')
this.usersRef
.get()
.then((snapshot) => {
console.log('TEST submitSearch snapshot', snapshot);
}).catch((error) => {
console.log(error)
});
}
The submitSearch is called from here
<Button style={{marginTop: 3, marginBottom: 8}} primary onPress={() => this.submitSearch()}>
{strings.search}
</Button>
So I've tried a lot of things here and I can't seem to figure out why the code won't work in the submitSearch function. The only thing I see from that function is the console log saying submit search.
Any ideas would be appreciated! Thanks.
The issue was the way the function was bound.
I originally had the following in the constructor:
this.submitSearch = this.submitSearch.bind(this)
and was calling it in the button component with
onPress={this.submitSearch}
I removed the constructor binding and used just the following in the button component:
onPress={() => this.submitSearch()}
I thought I had done that already! But I can confirm this fixes the issue. It's strange that there are no warnings or errors though, seems like a scenario where they would be helpful instead of just not running the code.