javascript - Vuetify 项目组如何预选项目？

Question

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

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

<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或者是其他东西。您需要以 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>