代码之家  ›  专栏  ›  技术社区  ›  fadedbee

如何将变量传递给自定义组件而不进行求值?

  •  1
  • fadedbee  · 技术社区  · 7 年前

    我有一个自定义组件:

    <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>
    

      <FormGroup label="Channel" readonly="device_config.enabled" validate="required" v-model="device_config.some_setting" />
    

    自定义组件将“readonly”属性作为文本字符串接收 "device_config.some_setting" device_config.some_setting .

    如何使自定义组件使字段只读依赖于传入的调用组件模型中的值?

    1 回复  |  直到 6 年前
        1
  •  2
  •   Boussadjra Brahim    7 年前

    v-bind:readonly="setting" setting

        <FormGroup label="Channel" :readonly="setting" validate="required" v-model="device_config.some_setting" />
    
    推荐文章