This article has participated in the third phase of the “High production” track at the Digger Creators Camp. For more details, check out the third phase of the Digger Project | Creators Camp to “write” personal impact.

What kind of bug is this

The statement

In order to try something new, I specified vuE3 version when initializing the Uni-app project. The official version of vuE3 has not been added to the official version, so we still use vuE2 version in the project. Vue create-p dcloudio/uni-preset-vue#vue3 your-project-name

There is a list page that looks something like this:

In the list is the data rendered by a component through a V-for loop like this:

<div v-if="list.length > 0" class="list-wrap">
  <AccPswordCard
    v-for="(accPsword, i) in list"
    :key="i"
    :index="i"
    :accPsword="accPsword"
    @deleteCB="deleteCB"
  />
</div>
Copy the code

The problem is that I delete the current element in the accpswordcard. vue component and then notify the parent component to update the data and rerender it. The deletion logic in this code looks like this:

// Subcomponent accpswordCard.vue
props: {
  accPsword: {
    type: Object as PropType<AccountPasswordType>,
    required: true,},index: {
    type: Number.required: true,}},emits: ["deleteCB"].setup() {
  function deleteAP(index: number) {
    uni.showModal({
      title: "Tip".content: 'Sure to delete:${name.value}Is this the password? Unrecoverable after deletion! `.confirmText: "Delete".confirmColor: "red".success(res) {
        if (res.confirm) {
          // Delete request
          deleteAccPsword(id.value).then(({ successStatus }) = > {
            if (successStatus) {
              ctx.emit("deleteCB", index); Emit the parent component's callback method here and pass the index of the current data
              uni.showToast({
                icon: "success".title: "Deletion successful"}); }); }}}); }}// Methods in the parent component
function deleteCB(index: number) {
  const deleteData = list.value.splice(index, 1);
  console.log("delete index: ", index, deleteData);
}
Copy the code

Look at the logic of this paragraph, see the effect:

The deleted elements were right, the index was right, and I couldn’t figure out why, so I started programming for search engines, and after a long time: Do I think this is a bug? No! Uni -app#vue3 feature I should adapt to it, HMM! Right! That’s right!

No emojis can be found here

Do I need to tell the parent to delete an element?

After request interface success I oneself kill oneself not got!

// Add a v-show to the subcomponent accpswordCard.vue template
<template>
  <view v-if="showAPCard" class="acc-psword-card">. // setup = const showAPCard = ref(true); Showapcard. value = false; // Delete the request successfully showapcard. value = false;Copy the code

There you go.

limitations

This is not always possible in every scenario

  • If the list page is page-loaded, pay attention to pagingoffsetandsizeBecause we didn’t delete an item from the original list, we just didn’t show it
  • If the list page has a list number displayed on the previous page, the number must be updated upon return

conclusion

When we can’t solve the framework level feature (bug), we might as well think out of the previous logic to solve a problem, this time this problem is also found in the attempt of Uni -app#vue3, let me have a new solution and thinking of the business scenario in which father and son components are deleted from the list, is also worth it!