el-date-picker不响应change事件的研究过程
⼀、问题
1. 明明数据内容已经改变，视图为什么不渲染？
2. el-date-picker 为什么不响应 change 事件？
3. 什么？想⽤nginx代理访问本地css⽂件，⾕歌浏览器却给了这样的警告？
nginx Resource interpreted as Stylesheet but transferred with MIME type
4. 想⼀些js⽂件来⽤却不到？
⼆、解释
1. 明明数据内容已经改变，视图为什么不渲染？
⾸先“明明数据内容已经改变” 这个认识是错误的，看似变了，但是vue监视的数据内容并没有改变。视图能够实时渲染的只有在data⾥声明过的属性，没有声明的属性需要使⽤类似 that.value2 = Object.assign({},that.value2)；这样的⽅式重新渲染（这⾥假设改变了值的属性是 that.value2.props )
还有⼀种重新渲染⽅式：
//重新渲染未定义属性time【 this.ruleForm.time】
this.$set(this.ruleForm, "time", [e[0], e[1]]);
2. el-date-picker 为什么不响应 change 事件？
这个没有复现，如果以后遇到只能先将change事件换为input事件，下⾯这个博客有尝试解释过原因，但是不知准确性如何
3. 什么？想⽤nginx代理访问本地css⽂件，⾕歌浏览器却给了这样的警告？ nginx Resource interpreted as Stylesheet but transferred
with MIME type
nginx如果不指定mime type，则默认会以text/plain的形式处理，也就是说，浏览器会以纯⽂本的形式来处理css和js⽂件，所以⽆法正常加载样式。
在f 的 http块加⼊下⾯两⾏重启nginx后即可解决：
pes;
default_type application/octet-stream;
nginx 访问本地静态⽂件⽰例：
server {
js assign
listen 80;
server_g;
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;
}
}
4. 想⼀些js⽂件来⽤不到？
可以到上，具体⽤法如，页⾯会发⽣重定向，将重定向的url最后的meta去掉就能看到具体的js⽂件
三、⽰例
并没有复现change事件不响应的问题，如果遇到问题将 @change 换为 @input即可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import element CSS -->
<link rel="stylesheet" href="unpkg/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="unpkg/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="unpkg/element-ui/lib/index.js"></script>
<script src="unpkg/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]
* }
*
*/
<('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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。