javascript - 在 vue js 的子组件中使用 getElementbyId 无法呈现自定义组件的样式

Question

我已将组件定义如下：

<template>
  <div>
    <span style="font-size: 16px">{{label}}</span>
    <!-- <label style="font-size: 15px">{{ label }}</label> -->
    <input
      :class="{input:isSuccess, input_danger:isDanger, input_disabled:isDisabled}"
      :style="{width:width}"
      :id="id"
      :type="type"
      :max="max"
      :min="min"
      :state="state"
      :placeholder="placeholder"
      :disabled="disabled"
      :value="value"
      @input="handleInput"
      @change="change"
    />
  </div>
</template>

<script>
import TransformationVue from '../../pages/Transformation.vue';
export default {
  props: {
    value: [Number, String],
    id: String,
    label: String,
    min: Number,
    max: Number,
    type: String,
    state: Boolean,
    placeholder: [Number, String],
    isDanger:{
      type:Boolean,
      default:false
    },
    disabled:{
      type:Boolean,
      default:false
    },
    width:{
      type:String,
      default:'100%'
    }
  },
  data() {
    return {
      minVal:this.min,
      
    };
  },
  watch:{
    disabled:function(){
      alert('hello')
    }
  },
  computed:{
    isSuccess:function(){
      if(this.isDanger == false && this.disabled == false ){
        return true
      }else {
        return false
      }
    },
    isDisabled:function(){
      if(this.disabled ==true){
        return true
      }else{
        return false
      }
    }
  },
  methods: {
    handleInput(e) {
      this.$emit("input", e.target.value);
    },
    change(e) {
      if(this.type == 'number'){
        if(e.target.value<this.min || e.target.value > this.max){
          this.$emit("input", this.minVal)
          this.$toast.error("Out of range!, Allowed range is "+this.min+" to" + this.max, { timeout: 6000 });
        }else{
          this.$emit("change")
        }
      }else{
      this.$emit("change");
      }
    },
  },
};
</script>
<style scoped>

.input {
  font-size: 14px;
  height: 40px;
  border: 1px solid white;
  border-radius: 4px;
  border-bottom:4px solid #116b9d;
}
.input:hover {
  border-bottom:4px solid #93d9ff;
  background:rgb(255, 255, 255);
  transition: none;
}
.input:focus {
  border-bottom:4px solid #93d9ff;
  background:rgb(255, 255, 255);
  transition: none;
}
.input_danger {
  font-size: 14px;
  height: 40px;
  border: 1px solid white;
  border-radius: 4px;
  border-bottom:4px solid rgb(255, 180, 180);
}

.input_disabled {
  font-size: 14px;
  height: 40px;
  border: 1px solid white;
  border-radius: 4px;
  border-bottom:4px solid rgb(177, 177, 177);
}
.input_disabled:focus {
  font-size: 14px;
  height: 40px;
  border: 1px solid white;
  border-radius: 4px;
  border-bottom:4px solid rgb(177, 177, 177);
}

</style>

在 vue 页面中，我使用了如下组件：

<template>
<aboveComponent 
id='el'
@change="func"
:disabled="true"
/>
</template>

<script>
methods(){
func(){
document.getElementbyID('el').disabled = false
}
</script>

当我直接将 disabled 用作 true 或 false 时，组件样式正在更新，但是当我使用 document.getElementById 更改 disabled 属性时，禁用功能正在工作，但组件样式没有更新。

标签： javascriptnode.jsvue.jsvue-component