Question

所以我有这个设置，我有一个名为dataviewer.vue的组件用于显示表

<template>
  <table class="table">
    <thead class="bg-primary">
        <tr>
            <th v-for="item in thead">
                <span>{{item.title}}</span>
            </th>
        </tr>
    </thead>
    <tbody>
        <slot v-for="item in model.data" :item="item"></slot>
    </tbody>
</table>
</template>

<script>
    import Vue from 'vue'
    import axios from 'axios'

    export default {
        props: ['source', 'thead'],
        data() {
            return {
                model: {
                    data: []
                },
            }
        },
        beforeMount() {
            this.fetchData()
        },
        methods: {
            fetchData() {
                var vm = this
                axios.get(this.source)
                    .then(function(response) {
                        Vue.set(vm.$data, 'model', response.data.model)

                    })
                    .catch(function(error) {
                        console.log(error)
                    })
            }
        }
    }
</script>

然后我只在我的文章index.vue文件中调用此组件

<div class="page-container">
    <div class="page-content">
        <div class="content-wrapper">
            <data-viewer :source="source" :thead="thead">
                <template scope="props">
                    <tr>
                        <td>{{props.item.name}}</td>
                        <td>{{props.item.creator}}</td>
                        <td>
                            <i class="icon-checkmark5" v-if="props.item.publish === '0'"></i>
                            <i class="icon-cancel-circle2" v-else></i> 
                            {{props.item.publish}} //for testing purpose to see returned value
                        </td>
                        <td>{{props.item.created_at}}</td>
                    </tr>
                </template>
            </data-viewer>
        </div>
    </div>
</div>

<script type="text/javascript">
import DataViewer from '../../components/dataviewer.vue'

export default{
    components:{
        DataViewer
    },
    data(){
        return{
            source: '/api/article',
            thead: [
                {title: 'Name', key: 'name', sort: true},
                {title: 'Creator', key: 'creator_id', sort: true},
                {title: 'Publish', key: 'publish', sort: true},
                {title: 'Created', key: 'created_at', sort: true}
            ],
        }
    }
}
</script>

正如你在<template scope="props">里面的文章index.vue文件中看到的那样我然后编写我的html来显示表格行。还有一列（props.item.publish），我不想只显示数据库中的原始数据，但是在v-if="props.item.publish === '0'"执行某些条件，然后我将呈现一些清单图标，否则，如果不是然后它将呈现取消图标

<td>
   <i class="icon-checkmark5" v-if="props.item.publish === '0'"></i>
   <i class="icon-cancel-circle2" v-else></i> 
   {{props.item.publish}} //for testing purpose to see returned value
</td>

但是当我运行它时，它只是渲染所有行的取消图标...所以我的问题是如何在其中进行v-if？我也在考虑使用计算属性，但我无法从脚本

访问props.item.publish

Answer 1

props.item.publish应该是整数，而不是字符串

<i class="icon-checkmark5" v-if="props.item.publish === 0"></i>

v-如果在模板道具内

1 个答案: