Question

因此，当前我正在使用v-data-table来显示通过道具传递到vue组件中的数据。该prop是一个对象数组，每个对象都有几个字段，但是我要显示的唯一字段是name，img和store.price。名称和价格显示完美，但是当我尝试显示图像时，数据表中仅显示图像链接。有人可以看看我的代码并引导我朝正确的方向发展吗？

 <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>

以上代码的结果是：

Answer 1

看来您还没有在模板上关闭img标签。

还在您的addImages(){ this.displayedTools.forEach(function(part, index, theArray) { theArray[index].img = "<v-img src=" + theArray[index].img + "></v-img>" }) },方法中，注释了分配图像的行，并留下了分配字符串的行，并且v-img标签未关闭。

所以应该是这样的：

<androidx.appcompat.widget.Toolbar
    :
    android:layout_height="?attr/actionBarSize"
    android:theme="@style/AppBarTheme" />

为什么我的v数据表中没有显示图像

1 个答案: