Por ejemplo, quiero mostrar la tabla después de cargar el archivo en la pestaña 1, pero no afectará a la pestaña 2.

Mi código está aquí: https: //codesandbox.io/s/stupefied-feather-uuv4m? File = / src / App.vue

1
ilearnit 13 mar. 2021 a las 06:50

1 respuesta

La mejor respuesta

El problema aquí es que está utilizando variables de datos únicas para administrar varios objetivos reactivos, por lo que, para evitar esto, debe agregar propiedades / variables únicas a sus datos de editableTabs:

       editableTabs: [
        {
          title: "File Name 1",
          name: "1",
          showTable: false, // <===
          showUpload: true  // <===
        },
        {
          title: "File Name 2",
          name: "2",
          showTable: false,  // <===
          showUpload: true   // <===
        },
      ],

A continuación, debe modificar su plantilla para reaccionar a las nuevas propiedades de editableTabs:

      <UploadFile v-if="item.showUpload" @changee="changeStatus(item)" />
      <TableBox v-if="item.showTable" />

Finalmente, necesita modificar su método changeStatus para confirmar los cambios correctamente.

    changeStatus(item) {
      nextTick(() => {
        item.showUpload = false;
        item.showTable = true;
      })
    },

Puedes ver una versión de estado de ánimo de tu script aquí: https://codesandbox.io /s/vigorous-sunset-smrlq?file=/src/components/tabs.vue:1098-1227

Nota: en su demostración, el proceso de carga fallará debido a un problema de CORS, por lo que debe probar en su entorno de desarrollo.

0
oceangravity 13 mar. 2021 a las 12:41