CODEWITHSUNDEEP
laravelvue.jsvuejs2
Ikong
Ikong

Reputation: 2570

VueJs Props not read when setting initial value in data

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. enter image description here

I want to know how to get the props value into my local data variables.

Upvotes: 2

Views: 2377

Answers (6)

igreka
igreka

Reputation: 350

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!

Upvotes: 5

Ikong
Ikong

Reputation: 2570

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
            }
        },

Upvotes: 1

Jordi Serra
Jordi Serra

Reputation: 132

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

Upvotes: 0

tony19
tony19

Reputation: 138206

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

Upvotes: 0

Omid Bakhshi
Omid Bakhshi

Reputation: 15

try this:

watch: {
  dates: {
    handler(val){
     this.data.order_date = val.order_date;
  },
  deep: true
 }
}

Upvotes: 1

Yozz
Yozz

Reputation: 485

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
            }
        }
    }

Upvotes: 0

Related Questions