[英]How do I pass a variable through to a custom component without having it evaluated yet?
I have a custom component:我有一个自定义组件:
<template>
<div class="form-group">
<label for="desc">{{label}}</label>
<input id="desc" type="text" class="form-control input-sm"
:name="label"
:readonly="readonly"
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
v-validate="validate"
/>
<div class="error-feedback">{{ errors.first(label) }}</div>
{{readonly}}<!-- debugging -->
</div>
</template>
<script>
export default {
name: 'FormGroup',
props: {
label: String,
value: String,
readonly: String,
validate: String
},
data: function() {
return {
}
}
}
</script>
<style scoped>
.error-feedback {
color: #cc3333;
}
</style>
When I call it with:当我调用它时:
<FormGroup label="Channel" readonly="device_config.enabled" validate="required" v-model="device_config.some_setting" />
The custom component receives the 'readonly' property as the literal string "device_config.some_setting"
rather than the value contained in device_config.some_setting
.自定义组件接收 'readonly' 属性作为文字字符串
"device_config.some_setting"
而不是包含在device_config.some_setting
的值。
How can I get my custom component to make field readonly dependent on a value in the calling component's model which is passed-in?如何让我的自定义组件使字段只读依赖于传入的调用组件模型中的值?
使用v-bind:readonly="setting"
并且setting
应该是在你的父组件中定义的一个属性:
<FormGroup label="Channel" :readonly="setting" validate="required" v-model="device_config.some_setting" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.