У меня есть основной компонент и компонент диалога.
У меня есть событие щелчка в главном компоненте, которое увеличивает переменную и передает ее компоненту диалога, и проверяет в watch
, изменяется ли оно, и если это так, оно открывает диалоговое окно.
Это выглядит так
MainComponent. vue
<template>
<div>
<vs-card @click.native="openDetails()">
....content here....
</vs-card>
</div>
<DialogComponent :dialog_component_watcher:="dialog_component_watcher"></DialogComponent>
</template>
<script>
import DialogComponent from './shared/DialogComponent.vue';
export default {
name: 'main-component',
component: {DialogComponent}
data: () => ({
dialog_component_watcher: 1
}),
methods: {
openDetails() {
this.dialog_component_watcher++;
}
}
}
</script>
DialogComponent. vue
<template>
<div>
<v-dialog v-model="dialog">
</vdialog>
</div>
</template>
<script>
export default {
props: ['dialog_component_watcher'],
name: 'dialog-component',
data: () => ({
dialog: false
}),
watch: {
dialog_component_watcher: function(val) {
if(val) {
this.dialog = true;
}
}
}
}
</script>
Я сделал это на других моих компонентах, и это работает без ошибок.
Но на этом есть ошибка, говорящая: **[Vue warn]: You may have an infinite update loop in a component render function.**