[Vuejs]-Create a dynamic list with popup underneath each object (in vue)

by

1👍

✅

Without knowing what your data looks like, it’s kind of hard to provide a complete solution. However, what you are describing sounds a lot like a tabbed layout, with possibly multiple rows of tabs. You can accomplish what you want using the v-show directive, only showing a details section if it matches your selected item. For example:

HTML:

<div id="app">
  <table>
    <template v-for="row in rows">
      <tr>
        <th
          v-for="item in row"
          v-text="item.label"
          :class="{ selected: item.id === selectedId }"
          @click="selectItem(item.id)"        
        ></th>
      </tr>
      <tr>
        <td      
          :colspan="row.length"      
          v-for="item in row"
          v-show="item.id === selectedId"
          v-html="item.details"
        ></td>
      </tr>
    </template>
  </table>
</div>

JavaScript:

new Vue({
  el: "#app",
  data: {
    selectedId: 1,
    rows: [
      [
        {
          id: 1,
          label: "Item A",
          details: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies vitae massa vel cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum finibus iaculis.'
        },
        {
          id: 2,
          label: "Item B",
          details: 'Mauris placerat, est in finibus consectetur, ligula urna imperdiet velit, vel interdum lacus turpis a nisi. Etiam et neque sed dui maximus posuere.'
        }
      ],
      [
        {
          id: 3,
          label: "Item C",
          details: 'Vivamus consectetur maximus diam tincidunt bibendum. Fusce quis euismod risus.'
        },
        {
          id: 4,
          label: "Item D",
          details: 'Nam convallis diam sit amet purus lacinia, in euismod sem porttitor. Sed magna quam, consequat in aliquet ut, faucibus nec massa.'
        }
      ]
    ]
  },
  methods: {
    selectItem(id) {
        this.selectedId = id;
    }
  }
})

CSS:

/* Styles */

table {
  padding: 20px;
}
th {
  padding: 10px 20px;
  cursor: pointer;
}
th.selected {
  background-color: lightgray;
}
td {
  padding: 20px;
  background-color: lightgray;
}

I’ve added a jsFiddle for you to play around with.

👤Vince

Leave a comment