Vuetify 项目组如何预选项目？

Question

我正在尝试从 vuetify item-group中预选项目。 它适用于字符串，但不适用于对象。 在 vuetify 文档中，他们使用字符串数组作为项目组的项目列表。 它工作正常。

如果我尝试使用 object 数组作为项目列表它不起作用

<div id="app">
  <v-app id="inspire">
    <v-card class="mx-auto" max-width="500">
      <v-list shaped>
        <v-list-item-group v-model="model" multiple>
          <template v-for="(item, i) in items">
                <v-divider
                  v-if="!item"
                  :key="`divider-${i}`"
                ></v-divider>

                <v-list-item
                  v-else
                  :key="`item-${i}`"
                  :value="item"
                  active-class="deep-purple--text text--accent-4"
                >
                  <template v-slot:default="{ active, toggle }">
                    <v-list-item-content>
                      <v-list-item-title v-text="item.name"></v-list-item-title>
                    </v-list-item-content>

                    <v-list-item-action>
                      <v-checkbox
                        :input-value="active"
                        :true-value="item"
                        color="deep-purple accent-4"
                        @click="toggle"
                      ></v-checkbox>
                    </v-list-item-action>
                  </template>
          </v-list-item>
          </template>
        </v-list-item-group>
      </v-list>
    </v-card>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: [
      { name: "Connect"}
    ],
    model: [{name: "Connect"}]
  }),
})

Answer 1

您可以使用数据中的唯一值来实现，它可以是id或其他东西。 您需要在 model 中以Array的形式传递您的唯一值，然后应该使用您的<v-list-item>配置相同的唯一值。

请检查代码片段和工作codepen演示。

---

代码片段

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: [],
    model: [1, 3, 6]
  }),
  methods: {
    getValue(item) {
      return `${item.id}. - ${item.title.toLocaleUpperCase()}`;
    }
  },
  created: function() {
    let self = this;
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(json => self.$data.items = json)
  }
});

<div id="app">
  <v-app id="inspire">
    <v-card class="mx-auto" max-width="100%">
      <v-list shaped>
        <v-toolbar color="indigo" dark>
          <v-toolbar-title>List posts :- jsonplaceholder</v-toolbar-title>
        </v-toolbar> <br/>
        <v-list-item-group v-model="model" multiple>
          <template v-for="(item, i) in items">
                <v-divider
                  v-if="!item"
                  :key="`divider-${i}`"
                ></v-divider>

                <v-list-item
                  v-else
                  :key="`item-${i}`"
                  :value="item.id"
                  active-class="deep-purple--text text--accent-4"
                >
                  <template v-slot:default="{ active, toggle }" >

                    <v-list-item-content>
                      <v-list-item-title v-text="getValue(item)"></v-list-item-title>
                    </v-list-item-content>

                    <v-list-item-action>
                      <v-checkbox
                        :input-value="active"
                        :true-value="item.id"
                        color="deep-purple accent-4"
                        @click="toggle"
                      ></v-checkbox>
                    </v-list-item-action>
                  </template>
          </v-list-item>
          </template>
        </v-list-item-group>
      </v-list>
    </v-card>
  </v-app>
</div>