«TypeError: _vm. $ Refs.dialog.save не является функцией» в VuetifyJS
Я использую VueJS с VuetifyJS, и я получаю эту ошибку, как только пытаюсь сэкономить время, нажав кнопку ОК:
[Vue warn]: Error in event handler for "click": "TypeError: _vm.$refs.dialog.save is not a function"
Я не менял код - просто использовал исходный код из примера VuetifyJS:
<v-flex xs11 sm5>
<v-dialog
ref = "dialog"
v-model = "modal2"
:return-value.sync = "time"
persistent
lazy
full-width
width = "290px"
>
<v-text-field
slot = "activator"
v-model = "time"
label = "Picker in dialog"
prepend-icon = "access_time"
readonly
></v-text-field>
<v-time-picker v-model = "time" actions>
<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>
</v-flex>
<script>
export default {
data () {
return {
time: null,
menu2: false,
modal2: false
}
}
}
</script>
Кроме того, как только появляется средство выбора, веб-сайт за ним больше не виден - на нем должен быть только черный оверлей.
Я попытался обновить NodeJS и все зависимости до последней версии, но это не помогло. Откуда эта ошибка? Любые идеи приветствуются.
ОБНОВЛЕНИЕ: я поместил тот же неизмененный код из примера Vuetify в App.vue, и он работал, но все еще не работает в HelloWorld.vue - есть идеи?
@Sphinx Не могли бы вы объяснить, почему другое название v-модели должно решить проблему? Я попробовал, но у меня возникла ошибка [Vue warn]: Error in event handler for "click": "TypeError: this.$refs.dialog.save is not a function"
Какая у вас версия vuetify?
@Traxo 1.0.17: `" зависимости ": {" firebase ":" ^ 4.13.1 "," vue ":" ^ 2.5.2 "," vue-router ":" ^ 3.0.1 "," vuetify " : "^ 1.0.17"}, `
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
$refs are only populated after the component has been rendered, and they are not reactive. It is only meant as an escape hatch for direct child manipulation - you should avoid accessing $refs from within templates or computed properties.
Поэтому вам нужно вместо этого создать обработчик метода.
<v-btn flat color = "primary" @click = "save(time)">OK</v-btn>
И в вашем javascript вызов функции сохранения с использованием дочерней ссылки со свойством ref, примерно так:
export default {
data() {
return {
time: null,
menu2: false,
modal2: false
}
},
methods: {
save(time) {
this.$refs.dialog.save(time)
}
}
}
Извините, это не сработало. [Vue warn]: Error in event handler for "click": "TypeError: this.$refs.dialog.save is not a function" Есть идеи?
Добавьте вызов функции внутри $ .nextTick (function () {this. $ Refs.dialog.save (time)}), потому что кажется, что по какой-то причине ссылка не создается, когда вы пытаетесь получить к ней доступ
@Tom, я не уверен, что вы все еще сталкиваетесь с этой проблемой.
В случае, если диалог находится внутри "v-for", вам необходимо следовать приведенному ниже подходу.
Из документации Vue:
Когда ref используется вместе с v-for, полученный вами ref будет массивом, содержащим дочерние компоненты, отражающие источник данных.
Вместо этого вам нужно использовать @click = "$ refs.dialog [index - 1] .save (time)".
Это почти решило мою проблему! У меня возникли проблемы с рефери внутри v-for. Я бы порекомендовал изменить его на: @click = "$ refs.dialog [index] .save (time)"
У меня была такая же проблема, когда я копировал из vutify. Я скопировал элемент дважды, чтобы у двух элементов была одна и та же ссылка, из которой я пытался запустить функцию сохранения из обеих ссылок => конфликт =>, поэтому, пожалуйста, проверьте ссылки, если у вас есть моя проблема.
Например: если у вас есть первый => ref = "dialog", то сделайте второй => ref = "dialog2"
У меня тоже есть такая ошибка, я сделал console.info this. $ Ref.dialog и обнаружил, что это массив, поэтому я исправляю свой код на this. $ Refs.dialog [0] .save ().
methods: {
save(time) {
this.$refs.dialog[0].save(time)
}
}
Где определяется метод
save?