use vue.component to create components, and find that the dynamic variables written in template write html, are not bound. The previously used webpack plus scaffolding method uses vue, to move the components in another vue project this time, but this time the project does not use webpack,. I don"t understand why. Ask the boss to solve the problem.

error message: all dynamically bound variables on
html report such an error: Property or method "showlable" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

js Code:

Vue.component("UInputNumber", {
  template: `
    <div class="top-input-number-wrap no-float">
      <div v-show="showlable" class="lable-wrap" :style="lableStyle">
          <span>{{lable}}</span>
      </div>

      <div class="number-input-wrap" :style="inputStyle">
          <input type="number" class="text-input" v-model="inputValue" :disabled="disabled" @blur="inputBlurEvent" @focus="inputFocusEvent">
          <span v-show="showplaceholder || closeHidden" class="placeholder">{{placeholder}}</span>
          <div class="number-change-wrap">
              <span class="add" @click="numAdd"></span>
              <span class="sub" @click="numSub"></span>
          </div>
      </div>
    </div>
  `,
  props: {
    value:{
      type: [Number,String],
      default: 0
    },
    // lable
    lable: {
      type: String,
      default: ""
    },
    // 
    max: {
      type:Number,
      default: Infinity
    },
    min: {
      type: Number,
      default: -Infinity
    },
    // 
    disabled: {
      type: Boolean,
      default: false
    },
    // 
    step: {
      type: Number,
      default: 1
    },
    // 
    align:{
      type: String,
      default: "left"
    },
    // 
    iWidth: {
      type: [Number, String],
      default: 160
    },
    // lable
    lWidth: {
      type: [Number, String],
      default: 110
    },
    placeholder: {
      type: String,
      default: ""
    },
    // 
    positive: {
      type: Boolean,
      default: false
    },
    // lable
    hiddenLable: {
      type: Boolean,
      default: false
    },
    // 
    closeHidden: {
      type: Boolean,
      default: false
    }
  },
  data: function() {
    return {
      utValue: 1,
      inputfocus: false
    };
  },
  watch: {
    value: function(newVal,oldVal){
      if(newVal === null){
        this.$emit("input","");
      }else{
        this.inputValue = newVal;
      }
    },
    inputValue: function(newVal,oldVal){
      let newNumber = newVal;
      if(this.positive && newVal < 0){
        newNumber = 0;
      }else if( newVal > this.max || newVal < this.min){
        let numLength = newNumber.toString();
        numLength = numLength.length;
        newNumber = newNumber.substring(0, numLength - 1);
        this.$Message.error("!");
        this.inputValue = newNumber;
      }
      newNumber += "";
      this.dispatch("FormItem", "on-form-change", newNumber); //
      this.$emit("input", newNumber);
      this.$emit("on-change", newNumber);
    }
  },
  computed:{
    lableStyle: function(){
      return {width: `${this.lWidth}px`};
    },
    inputStyle: function(){
      return {width: `${this.iWidth}px`, textAlign: this.align};
    },
    showplaceholder: function(){
      if(this.placeholder && this.inputValue === "" && !this.inputfocus){
        return true;
      }else{
        return false;
      }
    },
    showlable: function(){
      if(this.hiddenLable){
        return false;
      }else if(!this.lable){
        return false;
      }else{
        return true;
      }
    }
  },
  mounted: function() {
    this.inputValue = this.value;
  },
  methods: {
    numAdd(){
      this.inputValue = Number(this.inputValue) + this.step;
      this.$emit("on-adsub-click",this.inputValue,this.inputValue -  this.step);
    },
    numSub(){
      this.inputValue = Number(this.inputValue) - this.step;
      this.$emit("on-adsub-click",this.inputValue,this.inputValue +  this.step);
    },
    inputFocusEvent(){
      this.inputfocus = true;
      this.$emit("on-focus",this.inputValue);
    },
    inputBlurEvent(){
      this.inputfocus = false;
      this.$emit("on-blur",this.inputValue);
      this.dispatch("FormItem", "on-form-blur", this.inputValue);   //
    },
  }
});