Question

我正在尝试使用下拉列表中的值填充下拉列表，而下拉列表是“已发送”的低谷道具。我从服务器正确获取数据，并将其存储在数组中，在该数组中使用该数组填充选定的下拉列表。这个问题看起来像是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

有什么我想念的吗？

欢迎任何帮助或建议！

Answer 1

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

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

请确保在getData对象中预定义了数组。

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

或像这样更新您的getData对象

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

填充值-动态下拉菜单

1 个答案: