Vuetify Vuex v-for v-switch 默认 true答案

【问题标题】：Vuetify Vuex v-for v-switch default trueVuetify Vuex v-for v-switch 默认 true
【发布时间】：2021-08-08 22:55:51
【问题描述】：

我在 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)
    }
  }

【问题讨论】：

标签： vue.js vuetify.js vuex

【解决方案1】：

您需要将 selectedValues 数组设置为等于 getArray - 这样所有 v-switch 将在开头被选中：

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

【讨论】：

我已经这样做了，但问题是安装组件时没有开关，它们仅在用户通过另一个组件添加它们时出现。所以我需要将您的解决方案移至watch 或computed 否？
是的，如果您从另一个组件更改开关数组，则向该数组添加一个监视并相应地更新 selectedValues。更好的解决方案是，如果您使用 vuex 更新开关数组 - 将 selectedValues 数组添加到存储中，当您将项目添加到开关数组时，也将其添加到 selectedValues 数组中。

【解决方案2】：

从文档看来，您可以将模型设置为包含数组中的每个项目。

发件人：https://vuetifyjs.com/en/components/switches/#model-as-array

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>

【讨论】：