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

Question

我将Nuxt.js与Vue.js结合使用。我添加了这样的动态组件。

// 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>

和组件中

// 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>

像这样。当我点击添加按钮时，每次点击都会显示组件。当我单击删除按钮时，然后删除最后一个组件...我要删除与单击的按钮相对应的组件。

为什么不工作indexOf？我看了console.log(this.buttons.indexOf(item));，它确实起作用了！当我单击第二个按钮时，出现索引1。但是为什么在组件上不起作用？

Answer 1

[我认为您无权访问this.buttons中的components/productFilter.vue，因为this.buttons的范围仅限于其组件实例，并且在props中提供它并期望其父级具有反应性不是一个好习惯。我建议您通过道具item-id在其中传递此动态组件的索引，然后在delQuerysToStore()中发出一个事件，然后在其父pages/index.vue中删除该组件。示例：

// 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>