如何将动态数据传递给组件?

时间:2016-10-05 09:36:58

标签: vue.js vue-component

我是Vue的新手,所以这可能是愚蠢的。在主要组件中我有这个:

components: [FormSelect],        
data() {
  return {
    listing: {
      country: ''
    }     
  }
}

我想要包含一个组件:

<form-select
  name="country"
  model="listing"
  :onchange="onCountryChange"
  :options="{{ ListingStatic::getCountries()->toSelect()->toJson() }}"
  label="{{ trans('listing::form.country') }}"
  placeholder="{{ trans('listing::form.choose_country') }}">
</form-select>

指定为:

<template>
    <div class="col-md-6 form-group" :class="{'has-error': getModel.errors.has(getName)}" >
        <label for="" class="control-label">{{ label }}</label>
        <v-select
                :value.sync="getModel.fields.getName"
                :on-change="onchange"
                :options="options"
                placeholder="placeholder">
        </v-select>
        <span class="help-block" v-show="getModel.errors.has(getName)">
            @{{ getModel.errors.get(getName) }}
        </span>
    </div>
</template>

<script type="text/ecmascript">
    module.exports = {
        name: 'FormSelect',
        props: ['label', 'placeholder', 'options', 'model', 'onchange'],
        computed: {
            getModel() {
                console.log(this.model)
                return this.model;
            },
            getName() {
                return this.name;
            }
        }
    };
</script>

基本上我想通过将选择字段包装到组件中来概括它 我应该使用计算属性来获得正确的模型和密钥吗?如何使用getModelgetName,以便根据传入的属性返回?

0 个答案:

没有答案