填充值 - 动态下拉列表答案

【问题标题】：Fill with values - dynamic dropdowns填充值 - 动态下拉列表
【发布时间】：2020-06-26 21:59:25
【问题描述】：

我正在尝试用值填充下拉列表，而下拉列表是通过道具“发送”的。我正确地从服务器获取数据，并将其存储在我使用该数组填充选定下拉列表的数组中。这个问题看起来像它的 Vuetify 或 Vue 错误，但我不确定。

动态下拉列表的代码如下所示（Vuetify）：

    <v-col cols="12" lg="2" md="2" sm="6" xs="6" v-for="(dropdowns, index) in dropdownNumber" v-bind:key="index">

            <v-select
            :v-model="dropdowns.field_name"
            :loading="loadingInputs"
            :label="dropdowns.dropdown_name"
            :disabled="enableDropdowns"

            :items="getData[dropdowns.field_name]"
            :clearable="true"
     
            :item-text="dropdowns.field_name"
            :item-value="dropdowns.field_name"
            :item-key="dropdowns.field_name"
            @mousedown="changeFields(dropdowns.field_name, index)"
            @change="selectedValue(dropdowns.field_name, $event)"
            :multiple="dropdowns.multiple"
          >
           
          </v-select>

以及从服务器获取数据的功能：

    async getDropdownData($event, index) {
        
          const key = $event
          

         try {
          
          this.values['sector_name'] = this.categoryName()
          this.keys.forEach(element => {
            if(localStorage.getItem(element) != null) {
              this.values[element] = localStorage.getItem(element)
            } 
          });
  

  
          this.takeServerData = (await DataService.getDropdownData({
              existingValues: this.values,
              selectedDropdown: $event
          })).data 
          
          this.getData[key] = this.takeServerData
          

          console.log(this.getData)

         
         } catch (error) {
           this.error = "Dogodila se pogreška prilikom dohvaćanja vrijednosti za tu opciju."
         }
      },

有时，当我编辑我的代码时，它通常会填充已点击的下拉菜单，但在刷新站点后它不起作用。

图片示例：https://imgur.com/a/MutkZQC

我有什么遗漏吗？

欢迎任何帮助或建议！

【问题讨论】：

您似乎没有正确使用v-select 组件。根据用法示例，应该是:options 而不是:items：github.com/sagalbot/vue-select
@Crayons 抱歉，这里我没有提到，我使用的是 Vuetify 下拉菜单：vuetifyjs.com/en/components/selects
¿您的日志中有任何错误吗？你运行 lint 了吗？
@eyyo 是的，我做到了.. 没有错误。

标签： vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

这听起来像是与嵌套对象相关的反应性问题。

https://vuejs.org/v2/guide/reactivity.html

确定您的数组是在 getData 对象中预定义的。

data () {
    return {
      getData: {
         field1 : [],
         field2 : []
      }
  }
},

或者像这样更新你的 getData 对象

this.$set(this.getData, key, this.takeServerData)

【讨论】：