Vuetify V-Chip Alphabetical Sort?-CodePudding

Hey Iam Trying To Sort Multiple V-Chips By Alphabetically. Any idea guys?

Down Below Is the Code Iam Trying To Display all my v-chips alphabetically sorted Should my array be sorted or is there any property in vuetify which does the work done? Any help would be appreciated

   <template>

        <div >
          <v-chip-group
            active-
            column
          >
            <v-chip
              v-for="tag in tags"
              :key="tag"
            >
              {{ tag }}
            </v-chip>
          </v-chip-group>
        </div>
     
</template>

<script>
  export default {
    data: () => ({
      tags: [
        'Work',
        'Home Improvement',
        'Vacation',
        'Food',
        'Drawers',
        'Shopping',
        'Art',
        'Tech',
        'Creative Writing',
      ],
    }),
  }
</script>

CodePudding user response：

You can simply achieve it by using Array.sort() method. You can sort either in mounted() lifecycle hook or directly in template itself inside v-for directive.

Demo :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    tags: [
        'Work',
        'Home Improvement',
        'Vacation',
        'Food',
        'Drawers',
        'Shopping',
        'Art',
        'Tech',
        'Creative Writing',
      ]
  })
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<div id="app">
  <v-app id="inspire">
    <v-chip-group active- column>
      <v-chip v-for="tag in tags.sort()" :key="tag">
        {{ tag }}
      </v-chip>
    </v-chip-group>
  </v-app>
</div>

CodePudding user response：

I would personnaly use a computed property to sort the data.

Then the logic of the sort function will be separated from the template and if you have more complex object with a more complex sort method that would be more readable.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  computed: {
     tagsSorted(){
        return this.tags.sort()
     }
  },
  data: () => ({
    tags: [
        'Work',
        'Home Improvement',
        'Vacation',
        'Food',
        'Drawers',
        'Shopping',
        'Art',
        'Tech',
        'Creative Writing',
      ]
  })
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<div id="app">
  <v-app id="inspire">
    <v-chip-group active- column>
      <v-chip v-for="tag in tagsSorted" :key="tag">
        {{ tag }}
      </v-chip>
    </v-chip-group>
  </v-app>
</div>

CodePudding user response：

Sorting it directly in the component resulted in a infinite update loop in the render function for me. This solves it:

<v-chip-group active- column>
    <v-chip v-for="tag in [...tags].sort()" :key="tag">
        {{ tag }}
    </v-chip>
</v-chip-group>