topcat 姍舞之間的極度凝聚

緣起

久久回來寫vue，本來預期修改資料後，原本 input v-model 的部分，預期會跟著資料，渲染到畫面中，但是實際上卻沒有。實際上透過console.log的方式，依舊可以讀出實際的內容。

預期

小喵撰寫其中一個功能是，透過 JS 產生亂碼的密碼，小喵大約是這樣寫。

<input type="text" v-model="currentUser.PW" id="txtPW" class="form-control" />

vue的資料部分，原本初始化是這樣宣告

currentUser:{},

結果在產生亂數密碼，去修改 currentUser.PW ，結果資料改了，但是畫面上卻沒有顯示出來。

var _self = this;
var newPW = doGenPW(8);
_self.currentUser.PW = newPW;

參考

本文內容參考以下這篇，講解得十分深入與清楚，包含解決的方式

[掘竅] 為什麼畫面沒有隨資料更新 - Vue 響應式原理（Reactivity） ~ PJCHENder<br>那些沒告訴你的小細節

修正

看完以上這一篇後，小喵才了解，原來是一開始宣告如果沒有宣告該欄位(或屬性)，那麼(v-model)雙向綁定，修改資料的時候就不會渲染回畫面。

修正的方式，小喵選擇第一個，在宣告資料的時候，正確地宣告相對應的欄位(或屬性)

currentUser:{
   PW:'',
},

這樣就能夠正常的顯示了。

 

 

---

以下是簽名：

• 歡迎轉貼本站的文章，不過請在貼文主旨上加上【轉貼】，並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】，感恩大家的配合。
• 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫，如果您需要C#的Code，也許您可以試著用線上的工具進行轉換，這裡提供幾個參考
  • http://converter.telerik.com/
  • http://www.carlosag.net/tools/codetranslator/
  • http://www.developerfusion.com/tools/convert/vb-to-csharp/

---

Microsoft MVP Visual Studio and Development Technologies (2005~2019/6)

topcat Blog:http://www.dotblogs.com.tw/topcat