Como es que puedo corregir esto

Este es mi codigo

<template>
    <div class="p-3 bg-white card border-radius-xl js-active position-relative mx-auto my-5 col-12 col-lg-8"
        data-animation="FadeIn" v-for="(categoria, index) in categorias" v-bind:key="index">
        <div class="text-center row">
            <div class="mx-auto col-10">
                <h5 class="font-weight-normal">
                    {{ categoria.name }}
                </h5>
                <p>
                    Hola aqui puedes revisar {{ categoria.name  }}
                </p>
                <div v-for="tipo in tipoCategorias" :key="id">
                    <p>
                        {{ tipo.name }}
                    </p>
                </div>
            </div>
        </div>
        <div class="multisteps-form__content">
            <div class="mt-3 row">
                <Media/>
            </div>
            <div class="">
                <Dropzone :key="index"/>
            </div>
        </div>
    </div>
</template>
  
<script>
import Dropzone from '../../Pages/Expedientes/Dropzone.vue';;
export default {
    name: 'Categorias',
    props: {
        msg: String,
        categorias: {
            type: Array,
            required: true
        }
    },
    components: {
        Dropzone,
    },
    methods: {
    },
    mounted: function(){
        console.log("Tiempo")
    }
};
</script>

Y QUIERO QUE SALGAN 3 DROPZONES DONDE SE PUEDAN ADJUNTAR LOS DOCUMENTOS NECESARIOS

Luis Rodríguez (0 xp)dic 26, 2023

Para repetir el componente Dropzone tres veces dentro del bucle v-for y asegurarte de que cada uno tenga una funcionalidad independiente, puedes modificar tu código de la siguiente manera:

<template>
  <div>
    <div
      class="p-3 bg-white card border-radius-xl js-active position-relative mx-auto my-5 col-12 col-lg-8"
      data-animation="FadeIn"
      v-for="(categoria, index) in categorias"
      :key="index"
    >
      <div class="text-center row">
        <div class="mx-auto col-10">
          <h5 class="font-weight-normal">{{ categoria.name }}</h5>
          <p>Hola aquí puedes revisar {{ categoria.name }}</p>

          <!-- Bucle para mostrar los tipos de categorías -->
          <div v-for="tipo in tipoCategorias" :key="tipo.id">
            <p>{{ tipo.name }}</p>
          </div>
        </div>
      </div>

      <!-- Bucle para mostrar tres instancias de Dropzone -->
      <div v-for="dropzoneIndex in 3" :key="dropzoneIndex">
        <div class="multisteps-form__content mt-3 row">
          <Media />
        </div>
        <div>
          <Dropzone :key="`${index}-${dropzoneIndex}`" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Dropzone from '../../Pages/Expedientes/Dropzone.vue';
export default {
  name: 'Categorias',
  props: {
    msg: String,
    categorias: {
      type: Array,
      required: true,
    },
  },
  components: {
    Dropzone,
  },
  data() {
    return {
      tipoCategorias: [
        // Tu array de tipos de categorías
      ],
    };
  },
  methods: {},
  mounted: function () {
    console.log('Tiempo');
  },
};
</script>

Con estas modificaciones, se creará un bucle para mostrar tres instancias del componente Dropzone dentro de cada iteración del bucle v-for principal. Además, he corregido el uso de la clave :key en el bucle secundario para evitar conflictos y asegurar la unicidad de las claves.