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

Question

我有一个计算属性countryName，它根据国家代码返回国家名称并且工作正常。我需要使用countryName 值作为country 数据属性的label 的值，但我得到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); }
}