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