+3
Ant modal trong vue3 vite không hoạt động
Mọi người cho em hỏi là ant modal nếu tách thành component thì nó lại không hoạt động ạ. Đây là file test.vue chứa modal
<script setup lang="ts">
import { reactive, computed, defineProps, defineEmits} from "vue";
let { visible } = defineProps({visible: {type: Boolean, required: true}})
const emit = defineEmits(['closeModal'])
// const state = reactive<any>({
// visible: false,
// });
const visibleModal = computed({
get() {
return visible;
},
set(value) {
emit('closeModal');
}
})
</script>
<template>
<div>
<a-modal v-model:visible="visibleModal" title="Basic Modal">
{{ visibleModal }}
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</a-modal>
</div>
</template>
Lúc gọi
<testVue :visible="state.visible"/>
Lúc dùng button để thay đổi thì trạng thái thì ở component cha đã thay đổi. Nhưng props xuống modal nó lại không đổi. Nếu để đoạn modal kia cùng chung 1 file không tách ra thì vẫn chạy bình thường.
Ai gặp trường hợp này chưa ạ, giúp em với. Em cảm ơn ạ!
Thêm một bình luận
2 CÂU TRẢ LỜI
+1
@manhle mình mới nhấn nhầm xóa bình luận, ko biết bạn mới bình luận cái gì, sorry bạn
Bạn thử watch như này xem được ko
<script setup lang="ts">
import { reactive, defineProps, defineEmits, Ref} from "vue";
const props = defineProps({
visible: {
type: Boolean,
default: false,
},
const visibleModal: Ref<boolean> = ref(props.visible)
watch(
() => props.visible,
() => {
visibleModal.value = props.visible
}
)
</script>
<template>
<div>
<a-modal v-model:visible="visibleModal" title="Basic Modal">
{{ visibleModal }}
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</a-modal>
</div>
</template>
@minhquan-sun Em xử lý được rồi ạ.
@minhquan-sun Đổi khai báo { visible } = defineProps() thành props = defineProps(). Dùng trong computed thì thành props.visible là được ạ. Khai báo { visible } kiểu này thì computed với watch không nhận được sự thay đổi.
0
Theo mình nghĩ có thể vì computed ko được update khi prop visible thay đổi.
Mình nghĩ bạn thử làm theo cách này xem sao:
<script setup lang="ts">
import { ref, computed, defineEmits } from "vue";
// Sử dụng ref thay cho reactive và defineProps để khai báo thuộc tính visible:
const visible = ref(false);
const emit = defineEmits(['closeModal']);
const visibleModal = computed({
get() {
return visible.value;
},
set(value) {
visible.value = value;
emit("closeModal");
},
});
</script>
<template>
// Sử dụng v-model để bind giá trị cho visibleModal và update nó khi có sự thay đổi
<a-modal v-model="visibleModal" title="Basic Modal">
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</a-modal>
</template>
@Clarence161095 Dạ em cảm ơn nhưng không được anh ạ.
@manhle Cách trên ko được à. Xin lỗi nhé 
Bạn thử cách này xem sao, trong file test.vue:
<template>
<a-modal v-model:visible="visibleModal" title="Basic Modal" @ok="closeModal">
{{ visibleModal }}
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</a-modal>
</template>
<script setup>
import { reactive, computed, ref } from "vue";
const visible = ref(false);
const visibleModal = computed({
get() {
return visible.value;
},
set(value) {
visible.value = value;
},
});
export default {
methods: {
closeModal() {
visible.value = false;
},
},
};
</script>
Để sử dụng component test.vue trong component cha:
<template>
<div>
<testVue :visible="state.visible" v-on:closeModal="closeModal"/>
</div>
</template>
<script>
export default {
data() {
return {
state: {
visible: false,
},
};
},
methods: {
closeModal() {
this.state.visible = false;
},
},
};
</script>
