Vue不刷新數據
[英]Vue doesn't refresh data
問題描述
當我嘗試一個測試示例時，Vue響應良好，但是當我頻繁使用下面的代碼時，它不再起作用，更改不存在。 有什么辦法嗎？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!--CDN Vuejs--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>Conversor</title> <div id="app" class="container"> <h3>{{conversor()}}</h3> <input type="text" class="form-group" v-model="num"> </div> </head> <body> <script> const app = new Vue({ el: '#app', data: { num: 100, nDecimal: [1, 5, 10, 50, 100, 500, 1000], nRomanos: ['I', 'V', 'X', 'L', 'C', 'D', 'M'] }, methods: { conversor: function () { if (this.nDecimal.indexOf(this.num) != -1) { return this.nRomanos[this.nDecimal.indexOf(this.num)] } else { return 'Other' } } } }); </script> </body> </html>
1 個解決方案
解決方案1
0 已采納 2019-08-18 23:46:20
對於此任務，最好的方法是使用watch ，並且要小心，因為您的數字是文本。 解決方案如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!--CDN Vuejs--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>Conversor</title> <div id="app" class="container"> <h3>{{conversor}}</h3> <input type="text" class="form-group" v-model="num"> </div> </head> <body> <script> const app = new Vue({ el: '#app', data: { num: 100, nDecimal: ['1', '5', '10', '50', '100', '500', '1000'], nRomanos: ['I', 'V', 'X', 'L', 'C', 'D', 'M'], conversor: 0 }, watch: { num: function (value) { if (this.nDecimal.indexOf(value) !== -1) { this.conversor = this.nRomanos[this.nDecimal.indexOf(this.num)] } else { return 'Other' } } } }); </script> </body> </html>
這是基於計算方法的另一種解決方案：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!--CDN Vuejs--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>Conversor</title> <div id="app" class="container"> <h3>{{ conversor }}</h3> <input type="text" class="form-group" v-model="num"> </div> </head> <body> <script> const app = new Vue({ el: '#app', data: { num: 100, nDecimal: ['1', '5', '10', '50', '100', '500', '1000'], nRomanos: ['I', 'V', 'X', 'L', 'C', 'D', 'M'] }, computed: { conversor: function() { if (this.nDecimal.indexOf(this.num) !== -1) { return this.nRomanos[this.nDecimal.indexOf(this.num)] } else { return 'Other' } } } }); </script> </body> </html>
Vue data() object 輸入 v-model 不起作用，除非我刷新頁面
[英]Vue data() object Input v-model doesn't work unless I refresh the page
Firebase function 重新加載 auth currentUser，不在 vue 組件中刷新
[英]Firebase function reload for auth currentUser, doesn't refresh in vue component
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.