V-如果里面的模板道具

所以我有这样的设置，我已经打电话给我的组件dataviewer.vue是使用显示表V-如果里面的模板道具

<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 - 如果它内部？我也想这样做计算的财产，但我不能从脚本

来源

2017-08-29 Laurensius Tony

是'props.item.publish'字符串或整数？也许这只是一个数据类型不匹配，这是带你到其他部分 –

哦哇现在你提到它，我是多么愚蠢....我删除引号和一切工作正常...大声笑....非常感谢你男人 –

谢谢，我将它添加为答案 –

props.item.publish访问props.item.publish应该是一个整数，不串

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

来源

2017-08-31 08:25:29

V-如果里面的模板道具

回答

相关问题