Vue问题汇总

一、双向数据绑定的问题

问题描述：一个list页，点击编辑数据是其中的一条。修改后，数据没有提交成功。再次点击此条数据编辑，显示的仍然是没有提交成功的数据。

解决方法：

/* 修改内容*/
    handleUpdate(row) {
      this.form = JSON.parse(JSON.stringify(row)) //this.form = row 就会有双向数据绑定的问题

}

二、富文本编辑器的使用

参考：

1.富文本框显示输入字数，超过限制不能输入

vue代码，maxContent 自定义最大字符数

"内容" prop="content">
          ref="myQuillEditor" v-model="form.content" :options="editorOption" maxlength="10" @change="onEditorChange($event)" />
          class="wordNumber">{{ TiLength }}/{{ maxContent }}
        

js部分

// 富文本显示字符数
    onEditorChange(event) {
      event.quill.deleteText(this.maxContent, 7)
      if (this.form.content === '') {
        this.TiLength = 0
      } else {
        // 样式也算字符数，因为存进数据库的也包含样式
        this.TiLength = this.form.content.length - 7 // event.quill.getLength()-1 //获取实际文字长度,空格等不会计算在内
      }
    }

css

 .wordNumber{
    position: relative;
    left: 420px;
    top: -25px;
  }

这样编辑富文本的时候就只能输入限定长度的字符了，但是这个防止不了粘贴到富文本的情况。因此提交时增加一个验证即可

if (this.form.content.length > (this.maxContent+7)) {
        this.$message({ message: '内容超过500字！', type: 'warning' });
        return;
      }

三、动态数据验证

需求描述：一个表单，分上中下三部分。上面是必填，中间是选择项，如果中选择true则下边是必填。否则要去掉验证

vue

"话题" prop="topic" :rules="[{ required: form.status === 0, message: '请输入话题标题！', trigger: 'blur' },{ min: 1, max: 20, message: '长度在20个字符', trigger: 'blur' }]">
          "form.topic" clearable />
        
        "蓝方观点" class="blue" prop="bluePoint" :rules="[{ required: form.status === 0, message: '请输入蓝方观点！', trigger: 'blur' }]">
          "form.bluePoint" clearable maxlength="20" />
        
        "初始人数" class="blue" prop="blueIni" :rules="[{ required: form.status === 0, message: '请填写蓝方初始票数！', trigger: 'blur' }]">
          "form.blueIni" clearable type="number" min="0" />
        
        "红方观点" class="red" prop="redPoint" :rules="[{ required: form.status === 0, message: '请输入红方观点！', trigger: 'blur' }]">
          "form.redPoint" clearable maxlength="20" />
        
        "初始人数" class="red" prop="redIni" :rules="[{ required: form.status === 0, message: '请填写红方初始票数！', trigger: 'blur' }]">
          "form.redIni" clearable type="number" min="0" />
        
        "投票时间">
          "11">
            "begindate" :rules="[{ required: form.status === 0, message: '请选择投票开始日期', trigger: 'change' }]">
              "form.begindate" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" />
            
          
          class="line" :span="2" style="text-indent: 1em">至
          "11">
            "endDate" :rules="[{ required: form.status === 0, message: '请选择投票结束时间', trigger: 'change' }]">
              "form.endDate" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" @change="checkDate" />
            
          
        

js去掉验证

 // 选择隐藏话题去除话题验证
    selectStatus() {
      if (this.form.status === 1) {
        this.$refs['form'].clearValidate(['topic', 'bluePoint', 'blueIni', 'redPoint', 'redIni', 'begindate', 'endDate'])
      } else {
        this.$refs['form'].validateField(['topic', 'bluePoint', 'blueIni', 'redPoint', 'redIni', 'begindate', 'endDate'])
      }
    }