v-if inside template props

Question

so i have this setup, i have my component called dataviewer.vue that use to show table

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

and then i just call this component in my article index.vue file

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

as you can see in my article index.vue file inside <template scope="props"> i then write my html for showing table row. And there is one column (props.item.publish) where i don't want to just show raw data from database but do some condition where v-if="props.item.publish === '0'" then i will render some checklist icon and otherwise if it is not then it will render cancel icon

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

but when i run it, it just render cancel icon for all rows... so my question is how to do v-if inside it? i also thinking doing computed property but i can't get access props.item.publish from script

Answer 1

props.item.publish should be an integer, not string

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