一、問題
-
明明數據內容已經改變，視圖為什么不渲染？
-
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>