I have some data inside Vuetify data-tables. I would like to return in every row a small dessert image/s. I don't know how to insert HTML inside Photo column and how to return an image. I use a v-dialog to edit text data, so I would like to edit also a specific photo by file input. With basic text I do not have any problem. Could someone help with this problem?
Demo: https://codepen.io/noobmaster2137/pen/qBqdwXN
Example: Screenshot
HTML:
<div id="app"> <v-app id="inspire"> <v-data-table :headers="headers" :items="desserts" sort-by="calories" class="elevation-1" > <template v-slot:top> <v-toolbar flat > <v-toolbar-title>Desserts</v-toolbar-title> <v-divider class="mx-4" inset vertical ></v-divider> <v-spacer></v-spacer> <v-dialog v-model="dialog" max-width="500px" > <template v-slot:activator="{ on, attrs }"> <v-btn color="primary" dark class="mb-2" v-bind="attrs" v-on="on" > New Item </v-btn> </template> <v-card> <v-card-title> <span class="headline"></span> </v-card-title> <v-card-text> <v-container> <v-row> <v-col cols="12" sm="6" md="4" > <v-text-field v-model="editedItem.name" label="Dessert name" ></v-text-field> </v-col> <v-col cols="12" sm="6" md="4" > <v-text-field v-model="editedItem.calories" label="Calories" ></v-text-field> </v-col> <v-col cols="12" sm="6" md="4" > <v-text-field v-model="editedItem.fat" label="Fat (g)" ></v-text-field> </v-col> <v-col cols="12" sm="6" md="4" > <v-text-field v-model="editedItem.carbs" label="Carbs (g)" ></v-text-field> </v-col> <v-col cols="12" sm="6" md="4" > <v-text-field v-model="editedItem.protein" label="Protein (g)" ></v-text-field> </v-col> <v-col cols="12" sm="12" md="12" > <v-file-input label="Photo" v-model="editedItem.photoURL" show-size small-chips truncate-length="15" ></v-file-input> </v-col> </v-row> </v-container> </v-card-text> <v-card-actions> <v-spacer></v-spacer> <v-btn color="blue darken-1" text @click="close" > Cancel </v-btn> <v-btn color="blue darken-1" text @click="save" > Save </v-btn> </v-card-actions> </v-card> </v-dialog> <v-dialog v-model="dialogDelete" max-width="500px"> <v-card> <v-card-title class="headline">Are you sure you want to delete this item?</v-card-title> <v-card-actions> <v-spacer></v-spacer> <v-btn color="blue darken-1" text @click="closeDelete">Cancel</v-btn> <v-btn color="blue darken-1" text @click="deleteItemConfirm">OK</v-btn> <v-spacer></v-spacer> </v-card-actions> </v-card> </v-dialog> <!-- Snackbar here --> <v-snackbar v-model="snackbar" > </v-snackbar> </v-toolbar> </template> <template v-slot:item.actions="{ item }"> <v-icon small class="mr-2" @click="editItem(item)" > mdi-pencil </v-icon> <v-icon small @click="deleteItem(item)" > mdi-delete </v-icon> </template> <template v-slot:no-data> No data </template> </v-data-table> </v-app> </div> Script:
new Vue({ el: '#app', vuetify: new Vuetify(), data: () => ({ dialog: false, dialogDelete: false, snackbar: false, snackbarText: 'Item has been successfully deleted', headers: [ { text: 'Dessert (100g serving)', align: 'start', sortable: false, value: 'name', }, { text: 'Calories', value: 'calories' }, { text: 'Fat (g)', value: 'fat' }, { text: 'Carbs (g)', value: 'carbs' }, { text: 'Protein (g)', value: 'protein' }, { text: 'Photo', value: 'photoURL', sortable: false }, { text: 'Actions', value: 'actions', sortable: false }, ], desserts: [], editedIndex: -1, editedItem: { name: '', calories: 0, fat: 0, carbs: 0, protein: 0, photoURL: 0, }, defaultItem: { name: '', calories: 0, fat: 0, carbs: 0, protein: 0, photoURL: 0, }, }), computed: { formTitle () { return this.editedIndex === -1 ? 'New Item' : 'Edit Item' }, }, watch: { dialog (val) { val || this.close() }, dialogDelete (val) { val || this.closeDelete() }, }, created () { this.initialize() }, methods: { initialize () { this.desserts = [ { name: 'Frozen Yogurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0, // photoURL: 'IMAGE HERE', photoURL: './assets/images/desserts/1.jpg', // photoURL: require('@/assets/images/desserts/1.jpg'), }, { name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3, photoURL: 'IMAGE HERE', }, { name: 'Eclair', calories: 262, fat: 16.0, carbs: 23, protein: 6.0, photoURL: 'IMAGE HERE', }, { name: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3, photoURL: 'IMAGE HERE', }, { name: 'Gingerbread', calories: 356, fat: 16.0, carbs: 49, protein: 3.9, photoURL: 'IMAGE HERE', }, { name: 'Jelly bean', calories: 375, fat: 0.0, carbs: 94, protein: 0.0, photoURL: 'IMAGE HERE', }, { name: 'Lollipop', calories: 392, fat: 0.2, carbs: 98, protein: 0, photoURL: 'IMAGE HERE', }, { name: 'Honeycomb', calories: 408, fat: 3.2, carbs: 87, protein: 6.5, photoURL: 'IMAGE HERE', }, { name: 'Donut', calories: 452, fat: 25.0, carbs: 51, protein: 4.9, photoURL: 'IMAGE HERE', }, { name: 'KitKat', calories: 518, fat: 26.0, carbs: 65, protein: 7, photoURL: 'IMAGE HERE', }, ] }, editItem (item) { this.editedIndex = this.desserts.indexOf(item) this.editedItem = Object.assign({}, item) this.dialog = true }, deleteItem (item) { this.editedIndex = this.desserts.indexOf(item) this.editedItem = Object.assign({}, item) this.dialogDelete = true }, deleteItemConfirm () { this.desserts.splice(this.editedIndex, 1) this.closeDelete() this.snackbar = true }, close () { this.dialog = false this.$nextTick(() => { this.editedItem = Object.assign({}, this.defaultItem) this.editedIndex = -1 }) }, closeDelete () { this.dialogDelete = false this.$nextTick(() => { this.editedItem = Object.assign({}, this.defaultItem) this.editedIndex = -1 }) }, save () { if (this.editedIndex > -1) { Object.assign(this.desserts[this.editedIndex], this.editedItem) } else { this.desserts.push(this.editedItem) } this.close() }, }, }) 
没有评论:
发表评论