el-date-picker 不响应change事件的研究过程
一、问题
-
明明数据内容已经改变，视图为什么不渲染？
-
el-date-picker 为什么不响应 change 事件？
-
什么？想用nginx代理访问本地css文件，谷歌浏览器却给了这样的警告？
nginx Resource interpreted as Stylesheet but transferred with MIME type
- 想找一些js文件来用却找不到？
二、解释
-
明明数据内容已经改变，视图为什么不渲染？
-
首先“明明数据内容已经改变” 这个认识是错误的，看似变了，但是vue监视的数据内容并没有改变。视图能够实时渲染的只有在data里声明过的属性，没有声明的属性需要使用 类似 that.value2 = Object.assign({},that.value2);这样的方式重新渲染（这里假设改变了值的属性是 that.value2.props )
-
还有一种重新渲染方式 ：
//重新渲染未定义属性time【 this.ruleForm.time】 this.$set(this.ruleForm, "time", [e[0], e[1]]);
-
-
el-date-picker 为什么不响应 change 事件？
-
这个没有复现，如果以后遇到只能先将change事件换为input事件，下面这个博客有尝试解释过原因，但是不知准确性如何
-
-
什么？想用nginx代理访问本地css文件，谷歌浏览器却给了这样的警告？ nginx Resource interpreted as Stylesheet but transferred with MIME type
-
nginx如果不指定mime type，则默认会以text/plain的形式处理，也就是说，浏览器会以纯文本的形式来处理css和js文件，所以无法正常加载样式。
-
在nginx.conf 的 http块加入下面两行重启nginx后即可解决：
include mime.types;
default_type application/octet-stream;
-
nginx 访问本地静态文件示例：
server { listen 80; server_name test.zzt.org; add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Headers X-Requested-With; add_header Access-Control-Allow-Methods GET,POST,OPTIONS; location / { root C:/EamonSec/Desktop/temp; } }
-
-
想找一些js文件来用找不到？
- 可以到 https://unpkg/com 上找，具体用法如 https://unpkg.com/axios?meta，页面会发生重定向，将重定向的url最后的meta去掉就能看到具体的js文件
三、示例
并没有复现change事件不响应的问题，如果遇到问题将 @change 换为 @input即可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import element CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker
v-model="value2.props"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="test"
>
</el-date-picker>
</div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios@0.20.0/dist/axios.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: function() {
return {
value1:[1598789081305,1598789081305],
value2:{}
}
},
methods:{
test: function(){
alert('响应change事件');
this.value2 = Object.assign({},this.value2);
},
value2props:function(obj){
this.value2["props"] = [1598789081305,1598789081305];
this.value2 = Object.assign({},this.value2);
}
},
created:function(){
var that = this;
/**
* 文件 dateList.json的数据：
* {
* "list":[1598789081305,1598789081305]
* }
*
*/
axios.get('dateList.json').then(function(res){
that.value2.props = [];
that.value2.props[0] = res.data.list[0];
that.value2.props[1] = res.data.list[1];
that.value2 = Object.assign({},that.value2);
});
}
})
</script>
</html>
