CODEWITHSUNDEEP
vue.jsvuetify.js
Ben
Ben

Reputation: 109

Why aren't images being displayed in my v-data-table

So currently I am using v-data-table to display the data being passed into the vue component via a prop. The prop is an array of objects, each object has several fields but the only fields I want to display are name, img, and store.price. Name and price display perfectly fine, but when I try to display an image, only the image link appears in the data table. Can someone take a look at my code and steer me in the right direction? 

 <template>
        <v-data-table
        v-model="selected"
        :headers="headers"
        :items="displayedTools"
        :items-per-page="10"
        :single-select="singleSelect"
        show-select
        class="elevation-1 tool-table"
      >

    <template slot="items" slot-scope="props">
        <td><img :src="props.item.img" style="width: 10px; height: 10px"></td>
        <td class="text-xs-right">{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.stores.price }}</td>
    </template>
  </v-data-table>
</template>

<script>
export default {
    name: 'ToolResults',
    props: ['found_tools'],
    data() {
        return {
            singleSelect: false,
            selected: [],
            headers: [
            { 
                text: 'Image', 
                value: 'img' 
            },
            {
                text: 'Tool Name',
                align: 'left',
                sortable: true,
                value: 'name',
            },
            { 
                text: 'Price', 
                value: 'stores.price' 
            }
            ],
            displayedTools: [{}]
        }
    },
    created() {
        this.populateTable()
        this.addImages()
    },
    methods: {
        populateTable(){
            this.found_tools.forEach(element => {
                this.displayedTools.push(element);
            });
        },
        //Method might need to be added to display Prices properly because it is an array. 
        displayPrices(){

        },
        //Add Image to rows
        addImages(){
            this.displayedTools.forEach(function(part, index, theArray) {
                //theArray[index].img = "<v-img src=" + theArray[index].img + "><v-img>"
                theArray[index].img = 'https:' + theArray[index].img 
            })
        },
        toToolboxPage(toolbox) {
            console.log(toolbox)
            // The Toolbox.vue compoent is already created. The user just needs to be redirected there
        }
    }
}
</script>

<style>
.tool-table {
    margin: 2em;
}
</style>

The result of the above code is: enter image description here

Upvotes: 1

Views: 601

Answers (1)

Scubbero
Scubbero

Reputation: 41

It seems that you haven't closed your img tag at the template.

Also in your addImages() method you have commented the line that assign the images and left the one that assigns a string and the v-img tag isn't closed.

So it should be something like:

    addImages(){
        this.displayedTools.forEach(function(part, index, theArray) {
            theArray[index].img = "<v-img src=" + theArray[index].img + "></v-img>"
        })
    },

Upvotes: 1

Related Questions