element-ui 表单验证 无法正确显示?

halo,我是vue新手,最近打算自己使用 laravel+vue 做点东西,但是遇到了点问题,卡了两天。

前端使用的是 element-ui 的开发的。在进行表单认证的时候出现了一个现象:两个输入框,一个验证的提示信息一直显示。网上找了一圈,没找到办法,来此请教!

  • 贴出主要代码如下(省略无关代码):

    <el-form :model="orderPayments" :rules="rules" label-width="100px" ref="orderMainForm">
    <el-col :span="8">
        <el-form-item label="交款人:" prop="jk_driver_id">
          <select-driver :selected="orderPayments.jk_driver_id" @changeSelect="jkrChange"></select-driver>
        </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="存款日期:" prop="ck_at">
        <el-date-picker
          v-model="orderPayments.ck_at"
          type="datetime"
          placeholder="选择日期时间"
          align="right"
          :picker-options="dateOptions">
        </el-date-picker>
      </el-form-item>
    </el-col>
    </el-form>
    <script>
    import SelectStore from 'components/Selector/SelectStore';
    export default {
    name: 'MainOrderDetail',
    components: { SelectDriver },
    props: {
    mainOrder: {
      type: Object,
      default: null
    },
    inputStaus: {
      tyep: String,
      default: 'edit'
    }
    },
    data() {
    return {
      rules: {
        jk_driver_id: [
          { required: true, message: '请选择交款人', trigger: 'change' }
        ],
        ck_at: [
          { type: 'date', required: true, message: '请选择存款日期', trigger: 'change' }
        ],
      },
    }
    },
    computed: {
    orderPayments() {
      return this.mainOrder;
    }
    },
    methods: {
    jkrChange(val) {
      this.orderPayments.jk_driver_id = val
    },
    }
  • 下面为 SelectStore 组件

    <template>
    <el-select v-model="selectAt" filterable
    placeholder="请输入关键词">
    <el-option
      v-for="item in selectOptions"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
    </el-select>
    </template>
    <script>
    import { fetchList } from 'api/restfull';
    export default {
    props: {
    selected: {
      default: ''
    }
    },
    data() {
    return {
      selectOptions: [],
      selectAt: '',
      loading: false
    }
    },
    mounted() {
    this.selectAt = this.selected;
    this.getOptions();
    },
    methods: {
    getOptions() {
      fetchList({}, '/drivers_list').then(response => {
        this.selectOptions = response.data;
      })
    }
    },
    watch: {
    selectAt(v) {
      this.$emit('changeSelect', v)
    }
    }
    }
    </script>
  • 下面为问题截图:
    file

《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 6

data 里你需要有一个属性来记来 jk_driver_id 的选中的值

6年前 评论

@byends 用了selectAt来记了,然后watch,变更的时候传到父组件。这样可以吗

6年前 评论

绑定的model 怎么没声明 orderPayments ;为啥select还要分一个组件出来,官方的select其实就是一个组件了;restfull是什么;变量命名也没有规律,有的下划线有的驼峰

6年前 评论

@Littlesqx 先谢谢你帮我指出的这些不足的地方,确实很多需要改进。然后是 orderPayments 变量是 computed 里声明了,要重新声明在 data 里吗?

6年前 评论

@linzi007 和声明orderPayments应该没有关,时间的验证没问题。。。我也太了解这个问题,估计和组件通信有关,rules 匹配触发不知道是不是和双向数据绑定有关,现在你的代码只是监听子组件option变化然后修改父组件。建议试一下用v-model通信。

6年前 评论

要不直接在 select-driver 加一个 v-model="orderPayments.jk_driver_id",其他不用修改

6年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!