选择 v-select 中的所有功能不保存所有项目答案

【问题标题】：Select All Feature in v-select not save all the items选择 v-select 中的所有功能不保存所有项目
【发布时间】：2020-03-24 19:24:42
【问题描述】：

我正在尝试向 vuetify 的 v-select 组件添加一个全选按钮。我可以使用按钮选择所有选项，但是当我单击保存时，它不会保存所有项目。但是，如果我一一手动选择所有打开，然后单击保存，则下拉列表中的所有项目都将被保存。请帮我找出问题。

<template>
 <v-select
  :items="documents"
  v-model="user.versions"
  :closeOnSelect="true"
  multiple
  attach
  auto
  item-text='name'
  item-value='id'>
 </v-select>
 <v-btn class="red-button" @click='selectAll'>Select</v-btn>
 <v-btn class="red-save-btn" @click='submitDocuments'><i class="material-icons edit">save</i> Save</v-btn>
</template>

<script>
 export default {
  props: ['user'],
  data: function () {
      return {
       documents: [],
       versions: []
      }
  },
  methods: {
   selectAll (){
    this.user.versions = [...this.documents]
    },
   submitDocuments() {
        var that = this;
        this.$axios.put(`/my_account/users/${this.user.id}.json`, {user: this.user})
   }
 }
}
</script>

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

您正在尝试直接编辑道具，这应该会给您以下警告：

避免直接改变 prop，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于 prop 值的数据或计算属性。

要使用 v-model，您可以使用计算的 setter/getter：


computed : {
  _user : {
     get () {
        return this.user
     },
     set (val) {
        this.$emit('change', val)
     }
   }
}

并将 v-select 上的 v-model 指向计算属性 <v-select v-model="_user.versions">

工作示例https://codepen.io/ellisdod/pen/jOPeRyr?editable=true&editors=101

【讨论】：