Динамическое заполнение таблицы, основанной на том, что выбрано в выпадающем меню в Vuetify

У меня есть таблица с 4 возможными наборами переменных. У меня также есть выпадающее меню (выберите).

Я бы хотел:

Заполните таблицу в порядке # 1, когда выбран первый вариант в раскрывающемся списке.

Заполните таблицу в порядке # 2, когда выбран второй вариант в раскрывающемся списке.

Заполните таблицу так, как показано на рисунке 3, когда выбран третий вариант в раскрывающемся списке.

Заполните таблицу в порядке # 4, когда выбран четвертый вариант в раскрывающемся списке.

UPDATE: я изменил «@click» на «@change», теперь кажется, что первый вариант передается как значение, независимо от того, какой вариант я выбираю!

Я написал код, который должен это сделать, но это не так:

<template>
<div>

 <v-card class="table1">
   <v-card-title>
    <v-flex class="text-xs-center">
      <v-select
        :mandatory="false"
        :items=dropItems
        label="dropSelect"
        v-model="dropSelect"
        @change="hasan">
      </v-select>
    </v-flex>
  </v-card-title>
  <v-data-table
    :headers="headers"
    :items="componentItems"
    hide-actions
    class="elevation-20"
  >
    <template slot="items" slot-scope="props">
      <td>
        <!--some rows-->
      </td>
    </template>
  </v-data-table>
</v-card>
</div>
</template>

<script>
   export default {
    data() {
      return {
       dropItems: ['option1', 'option2', 'option3', 'option4'],
       dropSelect: null,
       componentItems:[],
       headers: ['header values']}
  },
methods: {
  hasan() {
    if (this.dropSelect = 'option1') {
      this.componentItems = ['valeus version 1'];
    }
    else if (this.dropSelect ='option2') {
      this.componentItems = ['values version 2'];
    }
    else if (this.dropSelect = 'option3') {
      this.componentItems = ['values version 3'];
    }
    else if (this.dropSelect = 'option4') {
      this.componentItems = ['values version 4'];
    }
   }
 }
}

Я думаю, что проблема заключается в том, что в компонентах componentItems указано, что «option1» не обновляет его на

<v-data-table
.
.
:items="componentItems"
.
.
>

я прав? Если да, то как мне одновременно обновлять таблицу? Если это не лучший способ обновить таблицу, основанную на значении, выбранном в раскрывающемся меню?

Всего 1 ответ


Все, что мне нужно было сделать, это изменить: this.dropSelect = 'option1' to this.dropSelect === 'option1'

добавив еще два равных знака.


Есть идеи?

10000