Динамическое заполнение таблицы на основе того, что выбрано в выпадающем меню в Vuetify - PullRequest
Новая
       17

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

0 голосов
/ 02 октября 2018

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

Я хочу:

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

ЗаполнитьЕсли выбран второй вариант в раскрывающемся списке, используйте способ № 2.

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

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

ОБНОВЛЕНИЕ: Я изменил «@click» на «@change», теперь кажется, что только первый параметр передается как значение noНеважно, какую опцию я выберу!

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

<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 Ответ

0 голосов
/ 02 октября 2018

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

, добавив еще два знака равенства.

...