0
所以我有這樣的設置,我已經打電話給我的組件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 - 如果它內部?我也想這樣做計算的財產,但我不能從腳本
是'props.item.publish'字符串或整數?也許這只是一個數據類型不匹配,這是帶你到其他部分 –
哦哇現在你提到它,我是多麼愚蠢....我刪除引號和一切工作正常...大聲笑....非常感謝你男人 –
謝謝,我將它添加爲答案 –