Asked Jan 5th, 9:59 a.m. 112 0 2
  • 112 0 2
+3

Ant modal trong vue3 vite không hoạt động

Share
  • 112 0 2

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 ạ!

2 ANSWERS


Answered Jan 5th, 6:00 p.m.
Accepted
+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>
Share
Avatar meos meos @manhle
Jan 6th, 1:06 a.m.

@minhquan-sun Em xử lý được rồi ạ.

0
| Reply
Share
Avatar Quan Troy @minhquan-sun
Jan 6th, 1:30 a.m.

@manhle Bạn dùng watch() xử lý được rồi đúng k, hay dùng cách khác

0
| Reply
Share
Avatar meos meos @manhle
Jan 6th, 5:43 a.m.

@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
| Reply
Share
Avatar Quan Troy @minhquan-sun
Jan 6th, 6:05 a.m.

@manhle oke b

0
| Reply
Share
Answered Jan 5th, 11:08 a.m.
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>
Share
Avatar meos meos @manhle
Jan 5th, 1:15 p.m.

@Clarence161095 Dạ em cảm ơn nhưng không được anh ạ.

0
| Reply
Share
Avatar NGUYỄN ANH TUẤN @Clarence161095
Jan 5th, 3:37 p.m.

@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>
0
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.