[Vuejs]-Start the element in a new line

by

0👍

Can the options data be tweaked? It would make more sense for everything that should be grouped together to have the same group name. Then a computed property can get an array of unique group names. Following that, render each unique group with v-for, then inside that render all the options that match that group name with another v-for.

<div id="app">  
  <div v-for="group in uniqueGroups" class="header-container row mx-3">
    <div class="col-12">
      <h4>{{ group }}</h4>
      <div  class="row mx-0 my-2">
        <div v-for="(fdata, index) in options" :key="index">
          <template v-if="fdata.group != null && fdata.group.GroupName === group">
            <div class="Filter-with-header">
              <div class="Filter-info-wrapper">
                <input
                  type="text"
                  spellcheck="false"
                  v-model="fdata.column.ColumnAlias"
                />
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</div>

new Vue({
  el: "#app",
  data: {
    options: [
      {
        Id: 80,
        group: { GroupName: "MatrixDesc" },
        column: { ColumnAlias: "ReviewStatus" },
      },
      { 
        Id: 81, 
        group: { GroupName: "MatrixDesc" }, 
        column: { ColumnAlias: "AOI" }
      },
      {
        Id: 82,
        group: { GroupName: "MatrixDesc" },
        column: { ColumnAlias: "Location" },
      },
      {
        Id: 83,
        group: { GroupName: "Header2" },
        column: { ColumnAlias: "Chemical" },
      },
      {
        Id: 84,
        group: { GroupName: "Header2" },
        column: { ColumnAlias: "CollectionDate" },
      },
    ],
  },
  computed: {
    uniqueGroups() {
      return [...new Set(this.options.map(o => o.group.GroupName))]
    }
  }
})

example jsfiddle

Leave a comment