问题描述
我在 Vuetify 数据表中有一些数据。我想在每一行都返回一个小的甜点图像。我不知道如何在 Photo column 中插入 HTML 以及如何返回图像。我使用 v-dialog 来编辑文本数据,所以我还想通过文件输入来编辑特定的照片。对于基本文本,我没有任何问题。有人可以帮忙解决这个问题吗?
演示: https://codepen.io/noobmaster2137/pen/qBqdwXN
示例: 截图
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">{{ formTitle }}</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"
>
{{ snackbarText }}
</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>
脚本:
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',],desserts: [],editedindex: -1,editedItem: {
name: '',calories: 0,fat: 0,carbs: 0,protein: 0,photoURL: 0,defaultItem: {
name: '',}),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,{
name: 'Cupcake',calories: 305,fat: 3.7,carbs: 67,{
name: 'Gingerbread',calories: 356,carbs: 49,protein: 3.9,{
name: 'Jelly bean',calories: 375,fat: 0.0,carbs: 94,protein: 0.0,{
name: 'Lollipop',calories: 392,fat: 0.2,carbs: 98,{
name: 'Honeycomb',calories: 408,fat: 3.2,carbs: 87,protein: 6.5,{
name: 'Donut',calories: 452,fat: 25.0,carbs: 51,protein: 4.9,{
name: 'KitKat',calories: 518,fat: 26.0,carbs: 65,protein: 7,]
},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({},save () {
if (this.editedindex > -1) {
Object.assign(this.desserts[this.editedindex],this.editedItem)
} else {
this.desserts.push(this.editedItem)
}
this.close()
},})
解决方法
当您上传文件时,它不会只创建 url。如果您想查看您的图片,只需使用:
URL.createObjectURL(this.editedItem.photoURL);