v-if 在模板道具内

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>

您可以在我的文章 index.vue 文件中看到 <template scope="props"> 然后我编写我的 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>