0

Mi duda es la siguiente.

Tengo una lista de carpetas las cuales al hacer click sobre una de ellas esta se va a iluminar y va a mostrar su información.

Todo bien hasta aquí, ahora el problema es que al seleccionar otra carpeta, la anterior va a seguir iluminada. A continuación el ejemplo:

https://jsfiddle.net/fjgonzalezs/vabx4Lnc/

¿Como puedo hacer para seleccionar solo una carpeta a la vez?

Edit

Ya logre hacerlo, agregué un array con los estados de las carpetas para poderlo cambiar desde el padre y no desde el hijo.

https://jsfiddle.net/fjgonzalezs/o97zf6dw/

Aunque resuelvo el problema no se si será la mejor solución, no se si seria posible poner los estados dentro del array de carpetas en lugar de crear otro, pero al hacerlo no toma los cambios.

2
  • 1
    Podrías poner el id de tu carpeta en el estado, luego cuando eliges una nueva usas el valor en el state para quitar el foco, luego estableces el nuevo id y el nuevo foco.
    – toledano
    Commented el 9 abr. 2017 a las 8:46
  • 1
    @toledano Gracias por la ayuda, ya lo logre hacer, lo que no tenia claro era en donde volver a establecer el id y el foco, lo hacia en cada componente pero era de hacerlo en el padre.
    – Fer
    Commented el 13 abr. 2017 a las 17:30

1 respuesta 1

1

No necesitas necesariamente mantener asociado una carpeta con su estado. Una opción más práctica sería enviar a todos los elementos el id del folder que ha pedido ser abierto (mediante $emit) y hacer una comprobación para saber si el folder actual es el abierto para poder actualizar su clase CSS.

Ejemplo

En cada folder, ponemos una condicional para ver cuando agregar la clase open (por ejemplo):

<li 
  class="folder"
  :class="{open: this.folder.id === open}"
  @click="openFolder"
>
</li>

Cuando se pulse sobre cada folder, se envía al padre el id de dicho folder:

openFolder() {
  this.$emit('open', this.folder.id);
}

Cada folder tendrá las propiedades folder y open. Este último representa el id del folder que ha pedido abrirse.

props: {
  open: {
    type: Number,
    required: true,
  },
  folder: {
    type: Object,
    required: true
  },
},

Y por último, el padre, al recibir notificación que un folder quiere abrirse, actualiza su propia propiedad folderOpen:

methods: {
  onFolderOpen(id) {
    this.folderOpen = id;
  }
},

la cual es pasada como propiedad a cada folder:

<ul class="folders">
  <folder
    v-if="ready"
    v-for="folder in folders"
    :folder="folder"
    :open="folderOpen"
    @open="onFolderOpen"
  />
</ul>

Código completo

Vue.component('folder', {
  template: `
    <li 
      class="folder"
      @click="openFolder"
    >
      <i
        class="material-icons"
        v-if="open !== folder.id"
      >
        folder
      </i>
      <i
        class="material-icons"
        v-if="open === folder.id"
      >
        folder_open
      </i>
      <label>{{ folder.name }}</label>
    </li>
  `,
  props: {
    open: {
      type: Number,
      required: true,
    },
    folder: {
      type: Object,
      required: true
    },
  },
  methods: {
    openFolder() {
      this.$emit('open', this.folder.id);
    }
  },
});

const app = new Vue({
  data: () => ({
    folders: [],
    folderOpen: -1,
    ready: false,
  }),
  methods: {
    onFolderOpen(id) {
      this.folderOpen = id;
    }
  },
  created() {
    this.folders = [{
        id: 0,
        name: 'Proyectos',
      },
      {
        id: 1,
        name: 'Trabajo',
      },
      {
        id: 2,
        name: 'Hacking',
      },
      {
        id: 3,
        name: 'StackOverflow'
      },
    ];
    this.ready = true;
  },
});

app.$mount('#app');
ul.folders {
  list-style: none;
}

ul.folders li {
  align-items: center;
  color: #555;
  cursor: pointer;
  display: flex;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  height: 40px;
}

ul.folders li i {
  margin: 0 10px 0 0;
  pointer-events: none;
}

ul.folders li label {
  font-weight: 600;
  pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>

<div id="app">
  <ul class="folders">
    <folder v-if="ready" v-for="folder in folders" :folder="folder" :open="folderOpen" @open="onFolderOpen" />
  </ul>
</div>

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.