У меня есть таблица с 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'
добавив еще два равных знака.