VueJs Реквизиты не читаются при установке начального значения в данных

Question

В последнее время я много боролся за то, как установить начальное значение в свойстве локальных данных.Я использую Laravel с Vue.js

У меня есть этот код ниже в моем компоненте

props: {
            user: '',
            dates: {}
        },
        data() {
            return {
                bloodTypes: {},
                bloodComponents: {},
                data: {
                    order_date: this.dates.order_date,
                    order_details: []
                },
            }
        },

Я пытаюсь получить значение даты фиников в локальной переменной.

order_date: this.dates.order_date

возврат не определен.Хотя вы можете видеть на картинке ниже, что реквизиты были инициализированы.

Я хочу знать, как получить значение реквизита в моих локальных переменных данных.

Answer 1

Немного опоздал на вечеринку, но я подумал, что поделюсь своим обходным приемом при работе с асинхронными данными:

// in the parent component
<template>
    <child :foo="bar" v-if="bar" />
</template>

Тогда вы можете смело следовать рекомендованным в руководстве способам инициализации значения данных с помощью реквизитов следующим образом:

props: ['initialCounter'],
data: function () {
    return {
       counter: this.initialCounter
    }
}

Удачного кодирования!

Answer 2

Я наконец решил это с помощью, я изменил имя некоторой переменной, чтобы меня не смущали.Похоже, вам нужно поставить реквизит под часы, чтобы манипулировать им.

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

Answer 3

Назначьте значения в созданном или установленном крючке.

Пример: https://github.com/jserra91/vuejs_wrapper_elements_and_unit_tests/blob/master/src/components/ae/components/ea-select/EaSelect.vue

Answer 4

попробуйте это:

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

Answer 5

Проблема в том, что ваши props не объявлены правильно.

props: {
  user: '',  // <-- DON'T DO THIS
  dates: {} // <-- DON'T DO THIS
}

При использовании синтаксиса объекта для props каждый ключ является именем проп, а значение является типом данных (например, String, Number и т. д.):

props: {
  user: String,
  dates: Object
}

... или инициализатор объекта (который позволяет указать тип данных и значение по умолчанию), например:

props: {
  user: {
    type: String,
    default: ''
  },
  dates: {
    type: Object,
    default: () => ({})
  }
},

демо

Answer 6

Как насчет использования computed вместо?

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