J'essaie d'ajouter un popup-modal à un tableau dans vuetify vue.js mais il finit toujours par obtenir la valeur du premier élément.
Le problème se pose au niveau de la 4ème <td> où j'essaie de mettre en place une fenêtre modale pop-up.
Il n'obtient que le premier élément de la liste. J'ai l'impression que c'est une solution très facile à mettre en place il s'agit de la fonction 4ème <td> pour vous faire gagner du temps.
Modèle 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="stackoverflow.com/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: []
}
}})
