Vuetify V-Chip 按字母顺序排序？

Question

嘿，我正在尝试按字母顺序对多个 V 芯片进行排序。伙计们有什么想法吗？

下面是代码我正在尝试显示按字母顺序排序的所有 v-chips 我的数组应该排序还是 vuetify 中是否有任何属性完成了工作？任何帮助将不胜感激

   <template>

        <div class="pa-4">
          <v-chip-group
            active-class="primary--text"
            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>

Answer 1

您可以使用Array.sort()方法简单地实现它。您可以在 mounted() 生命周期挂钩中排序，也可以直接在 v-for 指令内的模板本身中排序。

演示：

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/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.css"/>
<div id="app">
  <v-app id="inspire">
    <v-chip-group active-class="primary--text" column>
      <v-chip v-for="tag in tags.sort()" :key="tag">
        {{ tag }}
      </v-chip>
    </v-chip-group>
  </v-app>
</div>

Answer 2

直接在组件中对其进行排序导致我在渲染函数中出现无限更新循环。这解决了它：

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

Answer 3

我个人会使用 computed 属性对数据进行排序。

然后排序函数的逻辑将从模板中分离出来，如果您有更复杂的对象和更复杂的排序方法，那将更具可读性。

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/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.css"/>
<div id="app">
  <v-app id="inspire">
    <v-chip-group active-class="primary--text" column>
      <v-chip v-for="tag in tagsSorted" :key="tag">
        {{ tag }}
      </v-chip>
    </v-chip-group>
  </v-app>
</div>

Vuetify V-Chip 按字母顺序排序？

Vuetify V-Chip Alphabetical Sort?

javascript

vue.js

vuetify.js