Vuetify Vuex v-for v-switch default true

Question

我在Vuex存储中有一个值列表，我为其创建了v-switch，但我希望在创建时v-switch的默认值为true。我试过input-value="true"，但它没有任何作用。既然我在文档中找不到任何对我有帮助的东西，有什么想法如何将它们设置为true吗？

<v-switch
v-for="(layerg, k) in getAddedGeoMetLayers"
:key="k"
:label="layerg"
:value="layerg"
dense
hide-details
v-model="selectedGeometLayers"
@change="updateSelectedAddedGeoMetLayers"
></v-switch>

export default {
mounted () {
this.selectedGeometLayers = this.getSelectedAddedGeometLayers
},
data () {
return {
selectedGeometLayers: []
}
},
computed: {
...mapGetters('map', [
'getSelectedAddedGeometLayers'
])
},
methods: {
updateSelectedAddedGeoMetLayers: function () {
this.$store.dispatch('map/updateSelectedAddedGeometLayers', this.selectedGeometLayers)
}
}

Answer 1

您需要将selectedValues数组设置为等于getArray-这样一来，所有的v-switch都将在开始时被选中：

mounted() {
this.selectedValues = [...this.getArray]
}

Answer 2

从文档中，您似乎可以将模型设置为数组中的每个项。

发件人：https://vuetifyjs.com/en/components/switches/#model-作为阵列

new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
people: ['John', 'Jacob'],
}
},
})

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
<v-app id="inspire">
<v-container fluid>
<p>{{ people }}</p>
<v-switch
v-model="people"
color="primary"
label="John"
value="John"
></v-switch>
<v-switch
v-model="people"
color="primary"
label="Jacob"
value="Jacob"
></v-switch>
</v-container>
</v-app>
</div>