Получить значение вычисляемого свойства в Vue.js и использовать его в свойстве данных

Question

Получить значение вычисляемого свойства в Vue.js и использовать его в свойстве данных

1

У меня есть вычисленное свойство countryName которое возвращает название страны на основе кода страны и отлично работает. Мне нужно использовать значение countryName как значение label свойства данных country но я получаю undefined.

export default {
    props: ['content'],
    data () {
        return {
            countries: require('../../plugins/countries'),
            country: {
                value: this.content.country_code,
                label: this.countryName
            }
        }
    },
    computed: {
        countryName () {
            return this.countries.find(item => item.value === this.content.country_code).label
        }
    }
}

Jack Barham 07 июнь 2017, в 23:51

Источник

Теги:

javascript

vue.js

vuejs2

1 ответ

Ещё вопросы

Bert · Accepted Answer · 2017-06-07T20-10-00.000Z

Когда компонент создается, функция данных вызывается до того, как вычисляемые свойства будут добавлены в компонент. Вот почему вы получаете undefined. Попробуйте установить его в mounted или created.

data () {
    return {
        countries: require('../../plugins/countries'),
        country: {
            value: this.content.country_code,
            label: null
        }
    }
},
computed: {
    countryName () {
        return this.countries.find(item => item.value === this.content.country_code).label
    }
},
mounted(){
    this.country.label = this.countryName
}

Для любопытных это функция initState с Vue 2.3.3

function initState (vm) {
  vm._watchers = [];
  var opts = vm.$options;
  if (opts.props) { initProps(vm, opts.props); }
  if (opts.methods) { initMethods(vm, opts.methods); }
  if (opts.data) {
    initData(vm);
  } else {
    observe(vm._data = {}, true /* asRootData */);
  }
  if (opts.computed) { initComputed(vm, opts.computed); }
  if (opts.watch) { initWatch(vm, opts.watch); }
}

Отлично, спасибо. Я отмечу ответ, когда это позволит мне через несколько минут.
Мне пришлось использовать created() не mounted() и сумел отказаться от вычисленного свойства created () {this.country.label = this.countries.find(item => item.value === this.content.country).label}
По какой-то причине mounted() не работал. Спасибо за вашу помощь, хотя.