I've been struggling a lot lately on how to set the initial value in local data property. I'm using Laravel with Vue.js
I have this code below in my component
props: {
user: '',
dates: {}
},
data() {
return {
bloodTypes: {},
bloodComponents: {},
data: {
order_date: this.dates.order_date,
order_details: []
},
}
},
I'm trying to get the value of the props 'dates' into the local variable.
order_date: this.dates.order_date
return undefined. Although you can see in the picture below that the props have been initialized.
I want to know how to get the props value into my local data
variables.
A little late to the party but I thought I would share my workaround when working with async data:
// in the parent component
<template>
<child :foo="bar" v-if="bar" />
</template>
Then you can safely follow the guide's recommended ways to initialize data value with props as so:
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
Happy coding!
try this:
watch: {
dates: {
handler(val){
this.data.order_date = val.order_date;
},
deep: true
}
}
I finally solved this with, I have changed some variable name so that I won't be confused. It seems that you need to put props under watch in order to manipulate it.
props: [ 'user','blood_components', 'blood_types', 'current_date'],
data() {
return {
list: {
order_date: '',
}
}
},
watch:{
current_date: function() {
let self = this
self.list.order_date = this.current_date
}
},
How about using computed instead?
props: [
'user',
'dates'
],
data() {
return {
bloodTypes: {},
bloodComponents: {}
}
},
computed: {
data: function() {
return {
order_date: this.dates.order_date,
order_details: [] <= should be changed to something dynamically changed object
}
}
}
The problem is your props are not declared correctly.
props: {
user: '', // <-- DON'T DO THIS
dates: {} // <-- DON'T DO THIS
}
When using the object syntax for props, each key is the prop name, and the value is either a data type (e.g., String, Number, etc.):
props: {
user: String,
dates: Object
}
...or an object initializer (which allows you to specify data type and default value) like this:
props: {
user: {
type: String,
default: ''
},
dates: {
type: Object,
default: () => ({})
}
},
demo
Assign the values in the created or mounted hook.
Example: https://github.com/jserra91/vuejs_wrapper_elements_and_unit_tests/blob/master/src/components/ae/components/ea-select/EaSelect.vue
Related
Parent Component
<template>
<ChildComponent #send-message="handleSendMessage" />
</template>
Parent Component Script
export default {
methods: {
handleSendMessage(event, value) {
console.log('From the child:', value);
}
}
}
child Component
export default {
props: {
method: { type: Function },
},
computed:{
rep_9100_3() {
return parseInt(this.rep_6000_3) - this.decutable_allowance
},
},
mounted() {
this.$emit('send-message', this.rep_9100_3);
}
}
Yes you simply need to change handleSendMessage(event, value) to handleSendMessage(value).
One extra thing to note. It's could practice to pass a radix value when using parseInt:
parseInt(this.rep_6000_3, 10)
I'm trying to get values using axios and on my browser returns [[PromisseValue]] undefined. Follow my code. Please, help-me... thanks
This is my data to get
<script>
export default {
props: ['endpoint'],
data () {
return {
response: {
table: '',
displayable: [],
records: []
}
}
},
methods: {
getRecords () {
return axios.get(`${this.endpoint}`).then((response) => {
console.log(response.data.data.table)
})
}
},
mounted () {
this.getRecords()
}
}
It will return promise because AXIOS is a promise function that you are trying to return.
axios.get(`${this.endpoint}`).then((response) => {
this.response.table = response.data.data.table
})
after axios call you need save it into your state or data the response then use it wherever you want.
I've tried to follow the following tutorial in laravel 5.3 and vue 2.0:
https://www.youtube.com/watch?v=CeXDx4hdT1s
Products.vue:
<my-product :key="product.id"
v-for="product in products"
:authenticatedUser="authenticatedUser"
:product="product">
...
computed: {
authenticatedUser() {
this.$auth.getAuthenticatedUser()
}
},
Product.vue:
export default{
props: ['product', 'authenticatedUser']
}
Auth.js
setAuthenticatedUser(data){
authenticatedUser = data;
},
getAuthenticatedUser(){
return authenticatedUser;
}
Navbar.vue:
export default {
data() {
return {
isAuth: null
}
},
created() {
this.isAuth = this.$auth.isAuthenticated();
this.setAuthenticatedUser();
},
methods: {
setAuthenticatedUser() {
this.$http.get('api/user')
.then(response => {
this.$auth.setAuthenticatedUser(response.body);
console.log(this.$auth.getAuthenticatedUser());
})
}
}
I try to pass the authenticated user which is called in the Products.vue within the Product.vue
For that, at each login, the setAuthenticated method in the Navbar.vue is called where the authenticated user should be set in the corresponding method.
But when I check the property in the debugger of the browser, it's written Props authenticatedUser: undefinded. In fact the authenticated user is not shown.
Any ideas what it's missing?
In computed you need to return the value you want the property to take.
It should be:
computed: {
authenticatedUser() {
return this.$auth.getAuthenticatedUser()
}
},
I may be wrong in my understanding of props but I can't seem to be able to pass a prop to a component and then use the value in a method?
So far I am able to get data from a fixed API and output everything from the vue component, now I would like the api source to be dependent on the variable passed to the component.
My blade template:
<projectstatuses :userslug="this-user" :projectslug="this-project"></projectstatuses>
Then in my Vue Component:
export default {
props: {
userslug: {
type: String,
default: "other-user",
},
projectslug: {
type: String,
default: "other-project",
}
},
data() {
return {
statuses : [],
}
},
created(){
this.getStatuses();
},
methods : {
getStatuses(){
console.log(this.userslug);
console.log(this.projectslug);
axios.get('/api/' + this.userslug + '/' + this.projectslug)
.then((response) => {
let statuses = response.data;
this.statuses = statuses.statuses;
console.log(response.data.statuses);
})
.catch(
(response) => {
console.log('error');
console.log(response.data);
}
);
}
}
}
In the console I get the default values, if I remove the default values I get undefined. I have tried removing the api method and simply console logging the values but I still get undefined. Is what I'm trying to do possible or have I completely misunderstood how props work?
You are trying to bind this-user and this-project as a properties not as values ,
So you will need to define them in the data object in the parent,
but if you want to pass this-user and this-project just as value remove the : try that:
<projectstatuses userslug="this-user" projectslug="this-project"></projectstatuses>
Dynamic-Props
Don't add : in your template:
<projectstatuses userslug="this-user" projectslug="this-project"></projectstatuses>
Vue will expect there's data bound to this-user.
Problem: Although from the Vue DevTools I am passing the prop correctly and the router-view component has access to the data that it needs and in the correct format, whenever I try to access any of the data properties from within the template I get Uncaught TypeError: Cannot read property 'name' of null. It's really confusing because from the DevTools everything is a valid object and the properties are not null.
App.js
const game = new Vue({
el: '#game',
data: function() {
return {
meta: null,
empire: null,
planets: null
};
},
created: () => {
axios.get('/api/game').then(function (response) {
game.meta = response.data.meta;
game.empire = response.data.empire;
game.planets = response.data.planets;
});
},
router // router is in separate file but nothing special
});
main.blade.php
<router-view :meta="meta" :empire="empire" :planets="planets"></router-view>
script section of my Component.vue file
export default {
data: function() {
return {
}
},
props: {
meta: {
type: Object
},
empire: {
type: Object
},
planets: {
type: Array
}
}
}
Any ideas? Thanks in advance.
Because of your data is async loading so when my Component.vue renders your data in parent component may not be there. So you need to check if your data is loaded. You can try this code:
{{ meta != null && meta.name }}
PS: Your created hook should be:
created() {
axios.get('/api/game').then((response) => {
this.game.meta = response.data.meta;
this.game.empire = response.data.empire;
this.game.planets = response.data.planets;
});
},
router-view is a component from view-router which can help render named views. You can not pass empire and planets to it as those are props of your component.
You have to have following kind of code to pass empire and planets to your component:
<my-component :meta="meta" :empire="empire" :planets="planets"></my-component>
You can see more details around this here.