vue自定义指令更改对应的data值（值不固定）

由于我不仔细看element-ui文档，导致此方法白写了，该需求可使用InputNumber 计数器组件来实现！！！！！！！

 

由于项目中需要监听输入框中输入的数字不能为负数，并且需要监听的input框过多，所以决定使用自定义指令来解决该问题

直接贴代码

自定义指令代码

// 输入框小于0就替换成0
    Vue.directive('changeToZero', {
      update: function(el, binding) {
        // 将需要修改的对象摘出来
        const _str = binding.rawName.split('[')[1].split(']')[0]
        if (binding.arg < 0) {
          // 执行set方法
          binding.value.set(_str)
        }
      }
    })

 在template中使用,指令这一块看不懂的请参见vue官方文档，在这里就不复述了

<el-input type="number" v-model="ruleData.up.singleAmount" placeholder=""  
v-changeToZero:[ruleData.up.singleAmount]="{set:setNumber}"></el-input>

set方法

   methods: {
      // 小于0变成0
      setNumber(val) {
        let _arr = val.split('.')
        let data = this
        for (let i = 0; i < _arr.length - 1; i++) {
          data = data[_arr[i]]
        }
        data[_arr[_arr.length - 1]] = 0
      },
    }