明明数据内容已经改变,视图为什么不渲染?
el-date-picker 为什么不响应 change 事件?
什么?想用nginx代理访问本地css文件,谷歌浏览器却给了这样的警告?
nginx Resource interpreted as Stylesheet but transferred with MIME type
明明数据内容已经改变,视图为什么不渲染?
首先“明明数据内容已经改变” 这个认识是错误的,看似变了,但是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文件来用找不到?
并没有复现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>
el-date-picker 不响应change事件的研究过程
原文:https://www.cnblogs.com/sigm/p/13587137.html