我正在尝试选择表格中的一行并发出所选项。
选择一个会选择所有内容,但只有第一个遇到的对象会保存到模型中(作为selected
变量)。
你有什么想法,我做错了什么吗?
<template>
<v-data-table
:headers="headers"
:items="items"
:search="search"
:loading="loading"
v-model="selected"
single-select
show-select
:options="{itemsPerPage:5}"
@item-selected="itemSelected"
>
<template v-slot:top>
<v-toolbar flat>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search"
single-line
hide-details
></v-text-field>
</v-toolbar>
</template>
<template v-slot:item.name="{ item }">{{ item.name }}</template>
</v-data-table>
</template>
<script>
export default {
name: "variable-selector",
props: ["variables", "map", "index"],
data() {
return {
search: "",
selected: {},
loading: false,
items: [],
headers: [{ text: "Variable name", value: "name", sortable: true }]
};
},
methods: {
itemSelected(selection) {
if (selection.value) {
this.$emit("selected", selection.item); // it always emits var_2 object
} else {
this.$emit("selected", null);
}
},
updateItemsList(variables) {
this.items = Array.from(variables);
}
},
mounted() {
this.updateItemsList(this.variables);
},
watch: {
variables(newValue) {
this.loading = true;
this.updateItemsList(newValue);
this.loading = false;
}
}
};
</script>