英文:
Listen to Ref<string> change in Vue even if value is changed to 0 then the old one
问题
我遇到了Vue3的watch或onUpdated的问题：
我可以正常使用这两个来触发回调，但是让我举个例子：
- 用户点击删除按钮，并将
targetId设置为someId <Modal/>的watch被触发，因为props.id已更改，因此引导一个模态框出现- 用户误触模态框外部导致模态框隐藏。
- 用户再次点击删除按钮，但这次
targetId已经是someId，所以不会触发<Modal/>的watch。没有模态框显示出来
你可以在我的代码中看到，我尝试在每次调用showModal时将targetId设置为0，但没有帮助。在我看来，targetId确实改变了两次，但不知道为什么<Modal/>没有"监视"它。
基本上我想要在旧值等于新值时触发watch或onUpdated(<u>我知道直接做不可能</u>)，所以我尝试将它设置为默认值，然后再改回来，希望触发"旧值 -> 0"和"0 -> 旧值"两次更改，但没有帮助。
<!-- 父组件 -->
<template>
<button @onclick="showDeleteModal(someId)">删除</buton>
<Modal :id="targetId"/>
</template>
<script setup>
const targetId = ref(0)
const showDeleteModal = (id)=>{
<!-- 将其更改为0然后再更改为id没有用 -->
targetId.value = 0
targetId.value = id
}
</script>
<!-- 子组件(Modal) -->
<template>
一些模板
</template>
<script setup>
const props = defineProps({id: Number})
watch(()=>props.id, ()=>{
<!-- 显示模态框 -->
})
</script>
英文:
I got into a problem with Vue3's watch or onUpdated:
I can trigger the callback normally with both, but let's I got a senario below:
- A user click Delete button, and set the
targetIdtosomeId <Modal/>'swatchwas triggered becauseprops.idwas changed, so a bootstrap Modal show up- User misclicked on outside the modal and cause the modal to hide.
- User click Delete button again, but this time,
targetIdwas alreadysomeId, so<Modal/>'swatchwill not be triggered. And no modal will shown up
You can see in my code I tried to set targetId to 0 everytime showModal was called, but no help. In my opinion, targetId did change, twice, but don't know why it's not "watched" by <Modal/>
Basically I want to trigger watch or onUpdated even if old value is equel to the new value(<u>I know this is not possiable in a direct way</u>, so I tried to set it to a default value, then change it back, hoping to trigger "oldVal -> 0" and "0 -> oldVal" two changes, but no help.)
<!-- Parent -->
<template>
<button @onclick="showDeleteModal(someId)">Delete</buton>
<Modal :id="targetId"/>
</template>
<script setup>
const targetId = ref(0)
const showDeleteModal = (id)=>{
<!-- change to 0 then change back to id does not work -->
targetId.value = 0
targetId.value = id
}
</script>
<!-- Child(Modal) -->
<template>
some template
</template>
<script setup>
const props = defineProps({id: Number})
watch(()=>props.id, ()=>{
<!-- Show the Modal -->
})
</script>
答案1
得分: 1
更改在同一函数中来回变动的值不起作用，因为更改检测仅在函数结束后触发。您可以使用 nextTick()：
import { nextTick } from 'vue'
const showDeleteModal = (id) => {
targetId.value = 0
nextTick(() => targetId.value = id)
}
然而，这会触发两次模态框，并且这是一个笨拙的解决方法。
从您的描述中，似乎在模态框关闭时删除 id 可能是一个选择。如果可以的话，我会选择这个选项。
英文:
Changing the value back and forth in the same function doesn't work, because change detection will only trigger after the function has concluded. You could use nextTick():
import { nextTick } from 'vue'
const showDeleteModal = (id)=>{
targetId.value = 0
nextTick(() => targetId.value = id)
}
However, this will trigger the modal twice, and it is an awkward solution.
From your description, it sounds like it might be possible to remove the id when the modal closes. If that is an option, I would go with that.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论