[英]Vue js : custom input clear value
我創建了一個自定義輸入
<template>
<div class="content">
<p>
<slot></slot>
</p>
<input v-model="content" class="textbox" :type="type" @input="handleInput">
</div>
</template>
<script>
export default {
name: 'vTextbox',
props:{
type: String,
},
data: function(){
return {
content: ""
}
},
methods:{
handleInput(){
this.$emit('input', this.content)
}
}
}
</script>
父組件調用自定義輸入組件來抓取其內容,例如:
<vTextbox v-model="email" type="email">Email</vTextbox>
export default {
...
data: function(){
return{
email: "",
}
},
methods:{
Clear: function(){
this.email = ""
}
}
}
我想在調用 Clear 函數時清除自定義輸入組件的值/內容。 我嘗試設置 this.email="" 但它不起作用。
問題是您沒有收到自定義輸入中的值。 當您在父組件中有v-model
時,要使v-model
魔法起作用,組件需要實現value
prop 並觀察change
。
這可能是這樣的
<template>
<div class="content">
<p>
<slot></slot>
</p>
<input v-model="content" class="textbox" :type="type" @input="handleInput">
</div>
</template>
<script>
export default {
name: 'vTextbox',
props:{
value: String, // added value prop
type: String,
},
data: function(){
return {
content: ""
}
},
watch:{
value(val) {
this.content = val; // added watch to override internal value, this will allow clear to work
}
},
methods:{
handleInput(){
this.$emit('input', this.content)
}
}
}
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.