我在 Next 中遇到自定義組件的雙向系結問題。也許我在某處犯了一個愚蠢的錯誤。我將不勝感激任何幫助
#自定義組件Input.vue
<template>
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" class="input" type="text">
</template>
<script>
export default {
props:{
modelValue:String,
},
}
</script>
<style lang="scss" scoped>
@import '@/assets/_shared.scss';
.input{
padding: 10px 15px;
background: white;
border: 1px solid #cecece;
border-radius: 4px;
}
</style>
#頁面索引.vue
<template>
<section class="new-appeal">
<form class="new-appeal-form">
<label class="new-appeal-form-item">
<Input placeholder="Appeal" v-model.trim="cashier_name"/>
</label>
<Button class="submit">Creare appeal</Button>
</form>
</section>
</template>
<script>
export default {
layout:'main',
data:function(){
return{
cashier_name:''
}
},
}
</script>
如您所見，我正在嘗試進行雙向資料系結，但不幸的是它不起作用
uj5u.com熱心網友回復：
這很好用，并且遵循慣例。
index.vue
<template>
<section class="new-appeal">
<form class="new-appeal-form">
<label class="new-appeal-form-item">
<Input v-model.trim="cashierName" placeholder="Appeal" />
</label>
<Button class="submit">Creare appeal</Button>
</form>
</section>
</template>
<script>
export default {
layout: 'main',
data() {
return {
cashierName: '',
}
},
}
</script>
Input.vue
<template>
<input
:value="cashierName"
class="input"
type="text"
@input="$emit('input', $event.target.value)"
/>
</template>
<script>
export default {
name: 'Input',
props: {
cashierName: {
type: String,
default: '',
},
},
}
</script>
否則，您也可以將其如下（cashier_name順便說一句，我仍在重命名為camelCase）
index.vue
<template>
<section class="new-appeal">
<form class="new-appeal-form">
<label class="new-appeal-form-item">
<Input v-model.trim="cashierName" placeholder="Appeal" />
</label>
<Button class="submit">Creare appeal</Button>
</form>
</section>
</template>
<script>
export default {
layout: 'main',
data() {
return {
cashierName: '',
}
},
}
</script>
Input.vue
<template>
<input
:value="cashierName"
class="input"
type="text"
@input="$emit('update:cashierName', $event.target.value)"
/>
</template>
<script>
export default {
name: 'Input',
// https://vuejs.org/v2/api/#model
model: {
prop: 'cashierName',
event: 'update:cashierName',
},
props: {
cashierName: {
type: String,
default: '',
},
},
}
</script>
uj5u.com熱心網友回復：
在 Vue 2 中，您的默認 v-model 值只是value為了更新您必須發出input事件的值。你不能update:modelValue在vue 2中使用。你應該這樣使用，
<Input placeholder="Appeal" v-model.trim="cashier_name"/>
在您的自定義輸入組件中
<template>
<input :value="value" @input="$emit('input', $event.target.value)" class="input" type="text">
</template>
<script>
export default {
props: ['value']
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/370461.html
下一篇：Vue2和Firebase9-“在‘firebase/firestore’中找不到匯出‘getFirestore’