如何删除 Nuxt.js 中的动态组件

Question

I used Nuxt.js with Vue.js. I added dynamic component like this.

// pages/index.vue
<template>
  <div class="filter-container">
    <component v-for="item in buttons" :is="item" :key="item.id" :buttons="buttons" />
    <span class="add-search" @click="add">ADD</span>
  </div>
</template>

<script>
const dynamicComponentFilter = () => import("@/components/ProductFilter");

export default {
  data() {
    return {
      buttons: []
    }
  },

  methods: {
    add() {
      this.buttons.push(dynamicComponentFilter);
    }
  }
}
</script>

and in the component

// components/productFilter.vue
<template>
..........
  <span class="del" @click="delQuerysToStore(item)">del</span>
..
..
..
</template>

<script>
export default {
  props: ["buttons", "item"],

  methods: {
  delQuerysToStore(item) {
      this.buttons.splice(this.buttons.indexOf(item), 1);
    }
  }
}
</script>

like this. when I click add button, then appear component per click. and when I click del button, then delete last component... I want to delete the component that corresponds to the button I clicked.

Why didn't work indexOf? I watch console.log(this.buttons.indexOf(item)); , it did work, When I click second button. then appear index 1? But Why didn't work at component?

Answer 1

I think you do not have access to this.buttons in components/productFilter.vue because this.buttons is scoped to its component instance and it's not a good practice to provide it in props and to expect reactivity in its parent. I would suggest you to pass the index of this dynamic component in it via props item-id and then to emit an event in delQuerysToStore() and after that to remove the component in the parent pages/index.vue . Example:

// components/productFilter.vue

 props: {
   itemId: {
     type: Number,
     default: 0
   }
},
 methods: {
  delQuerysToStore(item) {
      this.$emit('delete', this.itemId)
    }
  }
}

// pages/index.vue

<template>
  <div class="filter-container">
    <component v-for="(item, index) in buttons" :is="item" :key="item.id" :buttons="buttons" @delete="deleteComponent" :item-id="index"/>
    <span class="add-search" @click="add">ADD</span>
  </div>
</template>

<script>
const dynamicComponentFilter = () => import("@/components/ProductFilter");

export default {
  data() {
    return {
      buttons: []
    }
  },

  methods: {
    add() {
      this.buttons.push(dynamicComponentFilter);
    },
    deleteComponent(itemId) {
     this.buttons.splice(itemId, 1)
    }
  }
}
</script>

In general this is the standard and good practice: Data down -> actions up. You provide data down to lower level components, but the lower level components emit events to their parent and thus the communication work between components.