使用vue.component创建组件template内的绑定变量报错的问题

Question

使用vue.component创建组件,在template写html,发现里面写的动态变量都绑定不上。之前一直用的webpack加脚手架的写法使用vue,这次想在另一个vue项目将组件移过来,而这次的项目没有使用webpack,有点搞不懂为什么这样。请大佬解惑。

报错信息:
html上的动态绑定变量都报这样的错: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代码:

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);   //传播验证
    },
  }
});

Answer 1

我是题主,问题已经解决,不关代码问题,是因为在mian使用了个缓存技术,使得没有刷新而导致,现已设为不缓存然后在发布时在改为使用缓存

Answer 2

你的写法貌似还是单页面的写法。
试试这样

var vm = new Vue({
  el: '#example',//组件的id
  data: {
    a: 1
  },
  computed: {
    // a computed getter
    b: function () {
      // `this` points to the vm instance
      return this.a + 1
    }
  }
})