我正在尝试向vuetify vue.js中的表添加一个弹出窗口模式，但是它总是最终获得第一项的值。
问题出现在我尝试实现弹出模式的第4 <td>处。
它一直只获取列表的第一个元素。我觉得这很容易解决。.第四 <td>只是为了节省您的时间。
Vue模板：
<script>
var model = @Html.Raw(Json.Encode(Model))
</script>
<div id="app">
<v-app id="inspire">
<v-card>
<v-card-title>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat color="purple" href="/Home">Home</v-btn>
<v-btn flat color="purple">Inventory</v-btn>
</v-card-actions>
<v-spacer></v-spacer>
</v-card-title>
</v-card>
<v-container grid-list-md text-xs-center>
<v-layout>
<v-flex xs8>
<v-card>
<v-card-title>
Un Added Lab Equipment
<v-spacer></v-spacer>
<v-text-field v-model="search"
append-icon="search"
label="Search"
single-line
hide-details></v-text-field>
</v-card-title>
<v-data-table :headers="Headers"
:items="items"
:search="search"
item-key="equipment"
hide-actions
expand
class="elevation-1">
<template slot="items" scope="props">
<td class="text-xs">{{ props.item.equipment }}</td>
<td class="text-xs">{{ props.item.location }}</td>
<td class="text-xs">{{ props.item.qty }} </td>
<td>
@*<a v-bind:href="props.item.pictureUrl">
<i class="fa fa-info-circle fa-2x" style="color: rgb(159, 212, 172);"></i></a>*@
<v-dialog v-model="dialog" lazy absolute>
<i class="fa fa-info-circle fa-2x" style="color: rgb(159, 212, 172);" slot="activator"></i>
<v-card>
<v-card-title class="justify-center">
<p class="headline">More Info for '{{ props.item.equipment }}'</p>
</v-card-title>
<v-card-text>
@*<v-img src="{{props.item.pictureUrl}}"
aspect-ratio="2.75"></v-img>*@ {{props.item.location}}
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn class="blue--text darken-1" flat="flat" v-on:click.native="dialog = false">No</v-btn>
<v-btn class="blue--text darken-1" flat="flat" v-on:click.native="deleteRow(props.item)">Yes</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</td>
<td class="text-xs">
<button v-on:click="decrement(props.item.id)" :disabled="disabled == props.item.id ? true : false">
<v-icon color="pink">remove</v-icon>
</button>
<button v-on:click="increment(props.item.id)" id="incrementButton" :disabled="disabled == props.item.id + '2' ? true : false">
<v-icon color="green">add</v-icon>
</button>
</td>
</template>
</v-data-table>
</v-card>
</v-flex>
</v-layout>
<br />
</v-container>
</div>
***Vue App:***
new Vue({
el: '#app',
data() {
return {
disabled: "",
searchAdded: '',
message: 'omae wa moo shindeiruu',
dialog: false,
notifications: false,
sound: true,
test: true,
widgets: false,
search: '',
Headers: [
{ text: 'Equipment', value: 'equipment' },
{ text: 'Location', value: 'location' },
{ text: 'Qty', value: 'qty' },
{ text: 'MoreInfo', value: 'pictureUrl', sortable: false, disabled: true },
{ text: 'Add or Remove', value: 'addo', sortable: false, disabled: true }
],
HeadersAdded: [
{ text: 'Equipment', value: 'itemName' },
{ text: 'Location', value: 'location' },
{ text: 'Qty', value: 'quantity' },
{ text: 'Add or Remove', value: 'addo', sortable: false, disabled: true }
],
items: [{ equipment: "beaker", location: 'Room 3535 drawer 21', qty: 21, id: '07f37f', pictureUrl: 'https://www.bhphotovideo.com/images/images2500x2500/Photographers_Formulary_09_0095_Glass_Beaker_600ml_231378.jpg' },
{ equipment: "ruler", location: 'Room 3535 drawer 10', qty: 7, id: '08f312', pictureUrl: 'https://images-na.ssl-images-amazon.com/images/I/41qUVuXt2AL.jpg' },
{ equipment: "flask", location: 'Room 2121 drawer 22', qty: 6, id: '09f37d', pictureUrl: 'https://images-na.ssl-images-amazon.com/images/I/316GJIEdJxL._SY445_.jpg' },
{ equipment: "vernier-caliber", location: 'Room 4125 drawer 21', qty: 12, id: '07g3hf', pictureUrl: 'https://static.grainger.com/rp/s/is/image/Grainger/2ZUF3_AS01?$mdmain$' }
],
itemsAdded: []
}
}
}）
答案 0 :(得分：1)
通过将每个项目的v-model更改为v-dialog，我可以使它生效。
代码段位于下面，我也创建了CodePen Mirror here。
现在它为项目列表中的每个特定项目设置对话框的打开/关闭属性：
<v-dialog v-model="dialog[props.item.equipment]"...
激活器插槽现在看起来像这样：
...@click.stop="$set(dialog, props.item.equipment, true)" slot="activator"...
.. v-dialog的“关闭按钮”也必须修改为：
...@click.stop="$set(dialog, props.item.equipment, false)"...
这意味着我还必须将dialog道具中的data()更改为对象：
data() {
return {
...
dialog: {},
...
}
}
代码片段：
new Vue({
el: "#app",
data() {
return {
disabled: "",
searchAdded: "",
message: "omae wa moo shindeiruu",
dialog: {},
notifications: false,
sound: true,
test: true,
widgets: false,
search: "",
Headers: [
{ text: "Equipment", value: "equipment" },
{ text: "Location", value: "location" },
{ text: "Qty", value: "qty" },
{
text: "MoreInfo",
value: "pictureUrl",
sortable: false,
disabled: false
},
{
text: "Add or Remove",
value: "addo",
sortable: false,
disabled: true
}
],
HeadersAdded: [
{ text: "Equipment", value: "itemName" },
{ text: "Location", value: "location" },
{ text: "Qty", value: "quantity" },
{
text: "Add or Remove",
value: "addo",
sortable: false,
disabled: true
}
],
items: [
{
equipment: "beaker",
location: "Room 3535 drawer 21",
qty: 21,
id: "07f37f",
pictureUrl:"https://www.bhphotovideo.com/images/images2500x2500/Photographers_Formulary_09_0095_Glass_Beaker_600ml_231378.jpg"
},
{
equipment: "ruler",
location: "Room 3535 drawer 10",
qty: 7,
id: "08f312",
pictureUrl: "https://images-na.ssl-images-amazon.com/images/I/41qUVuXt2AL.jpg"
},
{
equipment: "flask",
location: "Room 2121 drawer 22",
qty: 6,
id: "09f37d",
pictureUrl: "https://images-na.ssl-images-amazon.com/images/I/316GJIEdJxL._SY445_.jpg"
},
{
equipment: "vernier-caliber",
location: "Room 4125 drawer 21",
qty: 12,
id: "07g3hf",
pictureUrl: "https://static.grainger.com/rp/s/is/image/Grainger/2ZUF3_AS01?$mdmain$"
}
],
itemsAdded: []
};
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.14/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.6/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://static.fontawesome.com/css/fontawesome-app.css" rel="stylesheet"/>
<link href="https://pro.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
<div id="app">
<v-app id="inspire">
<v-card>
<v-card-title>
Un Added Lab Equipment
<v-spacer></v-spacer>
<v-text-field v-model="search" append-icon="search" label="Search" single-line hide-details>
</v-text-field>
</v-card-title>
<v-data-table :headers="Headers" :items="items" :search="search" item-key="equipment" hide-actions expand
class="elevation-1">
<template slot="items" scope="props">
<td class="text-xs">{{ props.item.equipment }}</td>
<td class="text-xs">{{ props.item.location }}</td>
<td class="text-xs">{{ props.item.qty }}</td>
<td>
<v-dialog v-model="dialog[props.item.equipment]" lazy absolute>
<v-btn flat icon color="blue lighten-2"
@click.stop="$set(dialog, props.item.equipment, true)" slot="activator">
<v-icon>info</v-icon>
</v-btn>
<v-card>
<v-card-title>
<div class="headline">More Info for '{{ props.item.equipment }}'</div>
</v-card-title>
<v-card-text>
<v-img :src="props.item.pictureUrl" aspect-ratio="2.75"></v-img>
{{props.item.location}}
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn class="blue--text darken-1" flat="flat"
@click.stop="$set(dialog, props.item.equipment, false)">No</v-btn>
<v-btn class="blue--text darken-1" flat="flat"
@click.native="deleteRow(props.item)">Yes</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</td>
<td class="text-xs">
<button v-on:click="decrement(props.item.id)"
:disabled="disabled == props.item.id ? true : false">
<v-icon color="pink">remove</v-icon>
</button>
<button v-on:click="increment(props.item.id)" id="incrementButton"
:disabled="disabled == props.item.id + '2' ? true : false">
<v-icon color="green">add</v-icon>
</button>
</td>
</template>
</v-data-table>
</v-card>
</v-app>
</div>