获取Vue.js中计算属性的值，并在数据属性中使用它

Question

我有一个计算属性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
        }
    }
}

Answer 1

当组件被实例化时，数据函数在计算属性被添加到组件之前被称为。这就是你得到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
}

对于好奇，这是Vue 2.3.3的initState功能

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