[聚合文章] vue和iview应用中的一些问题(持续更新)

vue.js 2017-11-16 1 阅读

之前回答过关于vue和iview使用的一些问题,偶尔又会有人再次问到,在之前的回答中去找太麻烦。
于是以后相关问题就归纳在这里啦。

1、 使用渲染函数渲染iview组件,如select时,添加on-change无效。
因为select中事件不是change,是on-change,所以应该是如下:

     return createElement(
      'Select',
      {
         on: {
             on-change: () => {   //这里的key是on-change,不是change
             
             }
         }
      }

2、在表单中使用iview Select或者其他的value类型为number时,校验是否为空。明明有值,确无法校验通过。

这是因为iview使用async-validator: https://github.com/yiminghe/a...

默认校验数据类型为string,然而select的value为number。所以应该修改rules

 ruleValidate:{
        building: [
            { type: 'number', required: true, message: '必须选择楼宇', trigger: 'change' }
        ]
  }

3、 在modal中使用form,添加了表单校验,然而还想要有button的loading。loading默认设为false,那么不校验了,默认为true时,校验不通过会有loading效果,那么校验不通过时设置loading为false呢。那么下一次编辑不校验了。。。我们通过如下的代码,设置每次校验完成重新设置loading为true解决(有点绕,遇到问题的时候,自会明白)

    this.$nextTick(() => {
        this.loading = true;
    });

4、父组件传递props给子组件,props为array或object引用类型时,改变此引用类型,子组件不更新。

这个和vue的响应式有关,我们正确的做法是调用vue示例的set方法,如下所示:

Vue.set(vm.someObject, 'b', 2)


this.$set(this.someObject,'b',2)   //全局Vue.set方法的别名

注:本文内容来自互联网,旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜,请你联系站长进行处理。