0

Quiero que en cada uno de mis dropzones, que al momento que le de click, pueda subir archivos en cada uno, mostre el index y solo me sirvio para la primera tipo de categoria que tengo pero para los demas no, ¿Como consigo que se vea igual a la primera parte?

Este es mi problema

Mi componente que contiene el dropzone en el cual quiero que funcione correctamente

<template>
    <div class="container cont">
  
      <div class="row">
  
        <div class="col-md-12 mt-4">
  
          <input type="text" v-model="buscar" class="form-control" placeholder="Buscar por nombre de archivo" />
  
        </div>

        <div class="p-3 bg-secondary card border-radius-xl js-active position-relative mx-auto my-5 col-12 col-lg-8" data-animation="FadeIn" v-for="categoria in categorias" :key="categoria.id">
                <div class="text-center row">
                    <div class="mx-auto col-10">
                        <h5 class="font-weight-normal">
                         <h1 class="text-white">{{ categoria.name }}</h1>
                            <div class="row mt-4 mb-4">
                                <div class="col-12">
                                    <div v-for="tipo in categoria.tipo_categoria" :key="tipo.id" class="text-white text-sm">
                                        <h3 class="text-white text-xl"> {{ tipo.name }}</h3>
                                            <small class="text-primary mr-6 text-white" v-for="(archivo, index) in tipo.archivo" :key="archivo.id">
                                                 {{ archivo.nombre }}
                                                <Dropzone :id="index"/>
                                            </small>
                                    </div>
                                </div>
                            </div>
                        </h5>
                    </div>
                </div>
                <div class="multisteps-form__content">
                    <div class="mt-3 row"></div>
                    <div class=""></div>
                </div>
            </div>
      </div>
    </div>
  </template>
  
<script>

  import Dropzone from '../../Pages/Expedientes/Dropzone.vue';
  
  export default {
    components: {
      Dropzone
    },
    name: 'Categorias',
    props: {
      msg: String,
      categorias: {
        type: Array,
        required: true
      }
    },
    methods: {
  
    },
    mounted: function () {
      console.log("Time");
    },
  
    // declaro el elemento buscar 
    data() {
      return {
        buscar: ''
      }
    },
  
    // Creo un método llamado 'items' y obtengo los datos de los pokemones
    // Asimismo filtro la búsqueda de los pokemones con el método filter()  
    computed: {
      categorias() {
        return this.categorias.filter(categoria => {
          return categoria.name.toLowerCase().includes(this.buscar.toLowerCase());
        });
      },
  
    }
  
  }
  
  </script>

Como ven aqui tengo mi dropzone; este seria el codigo de mi dropzone con el cual voy a subir los archivos al servidor

<template>
  <div class="multisteps-form__content">
    <div class="mt-3 row">
      <div class="col-12">
        <form
          :id="id"
          action="/file-upload"
          class="form-control dropzone"
        >
          <div class="fallback">
            <input name="file" type="file" multiple />
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

  <script>
  import ArgonButton from "@/components/ArgonButton.vue";
  import Dropzone from "dropzone";

  export default {
    props: {

    },
    name: "Media",
    props: {
        id: {
            type: String,
            required: true
        }
    },
    components: {
      ArgonButton,
    },
    mounted() {
      // Dropzone.autoDiscover = true;
      
      var drop = document.getElementById(this.id);
      new Dropzone(drop, {
        url: "/file/post",
        addRemoveLinks: true,
      });
    },
  };
  </script>

Agradeceria bastante si alguien puede guiarme de manera correcta, estoy trabajando con vue 3 y laravel en su version 9

1 respuesta 1

0

Lo he resuelto con una funcion de math random de JS como se muestra:

<small class="text-primary mr-6 text-white" v-for="(archivo, index) in tipo.archivo" :key="archivo.id">
                     {{ archivo.nombre }}
                       <Dropzone :id="Math.random().toString(16).substr(2, 8)"/>
</small>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.