我不太確定我在這里缺少什么。在我的 vue 專案中，我想更新pressed螢屏上的變數 ()。我可以通過傳遞輸入欄位來更新第二個值 ( username) 。v-model="username"
添加{{ pressed ? 'true' : 'false' }}到模板時，我只能從該data()部分回傳設定值。
如果有人能夠解釋這個概念，我非常感謝。我嘗試在檔案中查找問題，但找不到解釋。
我正在處理的代碼：
<template>
<div>
<div >
<input type="text" v-model="username"
id="inputUsername" placeholder="username_idea">
<label for="inputUsername">Your Username</label>
</div>
<button @click="validate" :disabled="!username"
type="button" id="search" >
<VueFeather type="search"></VueFeather>
validate
{{ username == '' ? '@username ' : '@' username }}
</button>
</div>
</template>
<script>
let username = ''
let pressed = false
export default {
data() {
return{
username: '',
pressed: false
}
},
methods: {
validate: () => {
console.log('fn validate called')
this.pressed = true
return{
pressed: this.pressed
}
},
},
}
</script>
我得到 2 個控制臺結果：
[Vue warn]: Unhandled error during execution of native event handler
at <Search>
at <HomeView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {…} > >
at <RouterView>
at <App>
warn @ runtime-core.esm-bundler.js?d2dd:38
logError @ runtime-core.esm-bundler.js?d2dd:212
handleError @ runtime-core.esm-bundler.js?d2dd:204
callWithErrorHandling @ runtime-core.esm-bundler.js?d2dd:158
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?d2dd:164
invoker @ runtime-dom.esm-bundler.js?2725:366
runtime-core.esm-bundler.js?d2dd:218
Uncaught TypeError: Cannot set properties of undefined (setting 'pressed')
at Proxy.validate (Search.vue?8555:51:1)
at onClick._cache.<computed>._cache.<computed> (Search.vue?8555:10:1)
at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:155:1)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?d2dd:164:1)
at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js?2725:366:1)
uj5u.com熱心網友回復：
在 Vue methods() 生命周期中使用常規函式而不是箭頭函式。這是因為箭頭函式定義了自己的“this”值。請看下面的代碼：
<template>
<div>
<div >
<input type="text" v-model="username"
id="inputUsername" placeholder="username_idea">
<label for="inputUsername">Your Username</label>
</div>
<button @click="validate" :disabled="!username"
type="button" id="search" >
<VueFeather type="search"></VueFeather>
validate
{{ username == '' ? '@username ' : '@' username }}
</button>
</div>
</template>
<script>
export default {
data() {
return{
username: '',
pressed: false
}
},
methods: {
validate() {
console.log('fn validate called')
this.pressed = true
return{
pressed: this.pressed
}
},
},
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/455348.html
標籤：Vue.js
上一篇：如何檢查帶有某些資料的物件是否在javascript的陣列中？[復制]
下一篇：重寫Vue組件使其更加DRY