elementUI From表单踩坑之watch 变量监控

-在这里插入图片描述

  • 当修改input框内的值(form.name)的时候,watch 监控from失败,watch中的from不相应,打印无效;
<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域">
    <el-select v-model="form.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活动时间">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="即时配送">
    <el-switch v-model="form.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活动性质">
    <el-checkbox-group v-model="form.type">
      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
      <el-checkbox label="地推活动" name="type"></el-checkbox>
      <el-checkbox label="线下主题活动" name="type"></el-checkbox>
      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊资源">
    <el-radio-group v-model="form.resource">
      <el-radio label="线上品牌商赞助"></el-radio>
      <el-radio label="线下场地免费"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活动形式">
    <el-input type="textarea" v-model="form.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    },
    watch : {
    	from(val, oldVal) {
    		console.log(val); // 无效
		}
    }
  }
</script>

热门文章

暂无图片
编程学习 ·

JAVA中的自定义异常

JAVA中的自定义异常SUN提供的内置的异常肯定是不够用的,在实际开发中我们需要自己自定义一些与业务相关的异常java中如何自定义异常: 第一步:编写一个类继承 Exception 或者 RuntimeException 设定为编译时异常就继承Exception 设定为运行时异常就继承RuntimeException 第二…
暂无图片
编程学习 ·

环型链表

环型链表 题目描述:给定一个链表,判断链表当中有没有环解体思路: 思路一:可以利用快慢指针的思路,给定两个指针,让两个指针一开始都位于链表头部的位置,然后开始走起来,一个指针每次走一步,一个指针每次走2步,如果说链表是有环的话,那么走的快的链表,就会先进入到环…
暂无图片
编程学习 ·

ASP.NET Core2.0项目实战-003

Views布局(Layouts)视图组件(ViewComponents)分部视图(PartialViews)HTML助手(HtmlHelpers) 页面标签的辅助类Tag助手(TagHelpers)配置全部视图(Global view configutation)视图找的时候如果home里面没有还会找shared文件夹里面的using System; using System.Colle…
暂无图片
编程学习 ·

后台开发核心技术(11):多线程

背景介绍 进程:以前,进程是最小的执行单位。进程是包含程序指令和相关资源的集合,每个进程和其他进程一起参与调度,竞争CPU、内存等资源。每次进程的切换,都存在着进程资源的保存和恢复动作,这称为上下文切换。 发现问题:比如一个简单的GUI程序,为了有更好的交互性,通…
暂无图片
编程学习 ·

UE4中让某个UI位于窗口的最顶端

1.处于同一嵌套层级的UI 可以使用Set ZOrder 设置那个Widget位于屏幕的最前面2.创建一个user widget 叫做ui_umg,里面加上两个按钮3.创建另外一个widget 叫做ui_pic,里面加上一个image4.这步是重点,ui_umg中按钮点击的时候 使用create widget 生成一个ui_pic, 但是这个时…
暂无图片
编程学习 ·

Web服务器防护技术你了解多少?

技术的迅速发展,给人们提供便利的同时,也给人们带来了威胁。通常情况下,黑客、病毒会利用系统的漏洞来进行网络攻击,如篡改网页、蔓延病毒等,从而造成用户信息的窃取、重要数据的破坏。因此,要对web服务器的安全问题引起足够的重视,要加大安全防护力度、构建安全防护系统…
暂无图片
编程学习 ·

IO基础篇:自动关闭接口AutoCloseable

介绍 在没有AutoCloseable之前,我调用资源对象,调用完毕后,必须要关闭,否则可能出现资源耗尽的情况 从名字就可以看出,AutoCloseable是一个可以自动保存资源并且关闭资源对象的接口,那么实现它的类就可以自动关闭资源,那怎样自动关闭呢?我们可以看下面例子: 例子 publ…
暂无图片
编程学习 ·

Matlab class文件 简单上手使用

1.简单的书写规范 一般通过软件(拓展)新建功能,可以选择新建一个脚本、函数或者是类。当然文件中以类的形式书写代码,保存后matlab将自动识别该文件为类。 当使用软件新建类后,新建的文件中包含了类文件的基础格式(我使用的软件是MATLAB R2014b): classdef Untitled3%U…
暂无图片
编程学习 ·

Python代码

hello world!!! import numpy as npfrom sklearn import linear_modelfrom mpl_toolkits.mplot3d import Axes3D import matplotlib.pyplot as pltxx, yy = np.meshgrid(np.linspace(0,10,10), np.linspace(0,100,10)) zz = 1.0 * xx + 3.5 * yy + np.random.randint(0,100,…
暂无图片
编程学习 ·

随笔 弹窗 二维码生成及图片下载

一、qrcode-vue模块该模块是用来动态生成二维码的vue模块插件,<qrcode-vue></qrcode-vue>的底层其实是一个<canvas></canvas>标签。要想使用qrcode.vue插件,需要用vue的脚手架安装这个插件安装指令npm install qrcode --save-dev,在这里我举一个例子…
暂无图片
编程学习 ·

spring-data-rest快速实现增删改查

spring-data-rest实现增删改查 - 项目相关依赖 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.1.3.RELEASE</version><relativePath/> </parent>…
暂无图片
编程学习 ·

设计模式简单介绍五(模板方法模式)

模板方法模式的意图 定义一个操作中的算法骨架,而将一些步骤延迟到子类中。模板方法使得子类可以不改变一个算法的结构即可重新定义该算法的某些特定步骤。 让我上去刚读到这段话我也是看不懂的,但是在现实中我们真的很常用到模板模式,通俗一些说就是如果我们需要通用的代码…
暂无图片
编程学习 ·

jvm垃圾收集算法以垃圾收集器简介

jvm垃圾收集算法以垃圾收集器简介 每天多学一点点~ 话不多说,这就开始吧… 文章目录jvm垃圾收集算法以垃圾收集器简介1.前言2.内存模型判断机制3.垃圾收集算法3.1 分代收集理论3.2 标记-复制算法3.3 标记-清除算法3.4 标记-整理算法4.常用的垃圾收集器4.1 Serial收集器(-XX:+U…
暂无图片
编程学习 ·

Effective-Java 第三版中文版 77. 不要忽略异常

77. 不要忽略异常 尽管这条建议看上去是显而易见的,但是它却常常被违反,因而值得再次提出来。当 API 的设计者声明一个方法将抛出某个异常的时候,他们等于正在试图说明某些事情。所以,请不要忽略它!要忽略一个异常非常容易,只需将方法调用通过 try 语句包围起来,并包含一…
暂无图片
编程学习 ·

公司裁员被迫辞职,我的Android面试经历

前言 2020年因为疫情的原因,整个互联网行业都进入了低谷期,许多公司都进行了裁员,而我所在的公司也不列外。公司裁员前两天,老板找我谈过话,说我很有前途、有能力还有一些七七八八的东西,我听了后,就感觉这次裁员可能会有我。于是我第二天就递交了辞呈。 就这样,离开了…
暂无图片
编程学习 ·

react状态管理之MobX

创建一个store.js文件 import { observable, action } from mobx class Store{@observable state ={name: jay}@action changeName = ()=> {this.state = {name: mm}] }const allStore = {oneStore: new Store() }创建一个父组件 index.js import React,{ Component } fro…
暂无图片
编程学习 ·

HTML 基本框架及一些基础命令

最近在学习HTML,是在菜鸟教程进行学习的,下面只是对自己所学习的只是进行总结,并对一些基础命令进行记录,便于自己后面使用的查找。1.一个基本的HTML框架就是这样的。HTML也是文本语言,可以用txt,notepad++文本编辑器进行编辑,当然还是更推荐使用专门的HTML编辑器来编辑…
暂无图片
编程学习 ·

SpringBoot+RabbitMQ,保证消息100%投递成功并被消费

一、先扔一张图说明:本文涵盖了关于RabbitMQ很多方面的知识点, 如:消息发送确认机制消费确认机制消息的重新投递消费幂等性, 等等 这些都是围绕上面那张整体流程图展开的, 所以有必要先贴出来, 见图知意二、实现思路简略介绍163邮箱授权码的获取编写发送邮件工具类编写RabbitMQ…