阿坝网站建设公司

vue知识总结-创新互联

数据不及时刷新，下拉框选择无效，文本框无法输入等问题

  1. 数据更新无效【原文】vue知识总结 
     对象obj，属性key，设置value
 this.$set(obj,key,value)
 数组arr，索引index，设置value
 this.$set(arr,index,value)

  2. 其他奇葩问题的首要思路
    （1）属性未声明
    （2）返回列表内无此属性
    （3）属性类型错误 '',[],new Map()
    （4）值为0 的时候 的判断

    专注于为中小企业提供成都做网站、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业永丰免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

解除对象间的相互影响

  JSON.parse(JSON.stringify(obj);
  如 this.form = res.data; 
  console.log(this.form, res.data);
  会发现res.data会受this.form影响，类型会随之变化

判断下拉框值，可能是单选多选

  typeof index === 'undefined' || index===null || index ==="" || index.length === 0

多方法接口是保证按照次序调用展示

  getAction(url,params).then(async (res) => {
     await this.xxfunction();
  });

  async xxfunction(){
    
  }

引入全局方法和全局变量

  以下为global.js内容
  const yesOrNoTableData=[
    {"value":1,"label":"是"},
    {"value":0,"label":"否"},
  ];

  const changeObjectToLabel = (dataOption, data, prop) =>{
    if(typeof data === "object"){
        return changeValueToLabel(dataOption, data[prop]);
     }
  };

  export default
  {
    yesOrNoTableData,
    changeObjectToLabel,
  };

  修改main.js
  import _GLOBAL from "@/api/global/global";
  Vue.prototype._GLOBAL = _GLOBAL;

  vue页面内如何使用
  this._GLOBAL.yesOrNoTableData

保留this，在其他地方使用，比如table column的format方法

常用方法

  1. 数组去重

     uniqueValArray(array) {
   return array.filter(function(ele, index, array) {
     return array.indexOf(ele) === index;
  });
 }

  2. 获取数组内某组元素，输出指定属性元素

     convertToSelect(array, sort, direction, ivalue, itext, ovalue, otext) {
   let options = [];
   if (array == null || array.length === 0) {
     return options;
   }
 if (sort && direction) {
   if (direction === "asc") {
     array = array.sort(function compareFunction(param1, param2) {
       return param1[sort].localeCompare(param2[sort]);
     });
   } else {
     array = array.sort(function compareFunction(param1, param2) {
       return param2[sort].localeCompare(param1[sort]);
     });
   }
 }
 for (let i = 0; i < array.length; i++) {
   let option = {};
   option[ovalue] = array[i][ivalue];
   option[otext] = array[i][itext];
   options.push(option);
 }
 return options;

    }

思路总结

  1. 下拉框，特别是级联下拉框，change事件 ，先清空所有下级的选中值，以及下下级的下拉框数组，然后再处理选中值数据
  2. form提交时数据处理，先通过JSON.parse(JSON.stringify(obj); 赋值新对象再处理，以防止提交失败，再次提交时，数据不合理。

标题名称：vue知识总结-创新互联
文章来源：http://abwzjs.com/article/shoih.html

其他资讯