所以我已经坚持这个问题有一段时间了。我在 Vuetify 中使用时间选择器创建了一个自定义组件。我在 Vue.js 文档中看到自定义模型组件,您需要像这样发出输入:
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
但即使添加了这个,它似乎也没有更新我的模型。我收到错误 TypeError: 无法读取未定义的属性“值”。我尝试了 $emit('input', $event) ,它似乎也不起作用。这是我的组件:
TimePicker.vue
<template>
<div>
<v-dialog
ref="dialog"
v-model="modal2"
:return-value.sync="time"
persistent
full-width
width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="time"
:label="label"
y
readonly
prepend-icon="far fa-clock"
v-on="on"
></v-text-field>
</template>
<v-time-picker
v-if="modal2"
:value="time"
@input="$emit('input', $event.target.value)"
full-width
>
<v-spacer></v-spacer>
<v-btn flat color="primary" @click="modal2 = false">Cancel</v-btn>
<v-btn flat color="primary" @click="$refs.dialog.save(time)">OK</v-btn>
</v-time-picker>
</v-dialog>
</div>
</template>
<script>
export default {
name: 'TimePicker',
props: ['value', 'label'],
data() {
return {
time: this.value,
modal2: false
};
}
};
</script>
我正在使用这样的组件:
<TimePicker v-model="startTime" label="Start Time"></TimePicker>
最佳答案
您可以尝试发出如下事件:
<input
v-bind:value="value"
v-on:input="onInput"
>
methods: {
onInput(value) {
this.$emit('input', value)
}
}
关于javascript - Vuetify 自定义时间选择器组件未更新模型并给出错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56066099/