gpt4 book ai didi

javascript - Vuetify 自定义时间选择器组件不更新模型并给出错误

转载 作者:行者123 更新时间:2023-11-29 20:39:03 24 4
gpt4 key购买 nike

所以我已经坚持了一段时间了。我在 Vuetify 中使用时间选择器创建了一个自定义组件。我在 Vue.js 文档中看到您需要像这样发出输入的自定义模型组件:

    <input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>

但即使添加了这个,它似乎也没有更新我的模型。我收到错误类型错误:无法读取未定义的属性“值”。我尝试了 $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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com