[英]Vuejs change the prop dynamically
我有一個組件上傳,並且將其傳遞給Alert.vue的類型可以正常工作。 我想要的只是將危險,警告或成功傳遞給alert.vue並在該類中進行連接。
像這樣:
<alert :loading="false" loadingtext="" type="danger" :alerttext="errortypes[file.error]" v-if="file.error">{{file.error}}</alert>
我該如何實現?
Upload.vue:
<div v-for="(file, index) in files" :key="file.id">
<span v-if="selectedfile">{{file.name}}</span>
<alert :loading="false" loadingtext="" type="alert alert-danger fade in alert-dismissible" :alerttext="errortypes[file.error]" v-if="file.error">{{file.error}}</alert>
<alert :loading="false" loadingtext="" type="alert alert-success fade in alert-dismissible" :alerttext="alertfilesuccessuploaded" v-else-if="file.success"></alert>
<alert :loading="false" loadingtext="" type="alert alert-warning fade in alert-dismissible" :alerttext="loadingtext" v-else-if="file.active"></alert>
</div>
Alert.vue:
<template>
<div :class="type" role="alert">
<a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">×</a>
<span v-html="alerttext"></span>
<loading v-show="loading" :loadingdata="loadingtext"></loading>
</div>
</template>
<script>
export default {
props: {
type: String,
alerttext: String,
loading: Boolean,
loadingtext: String
},
created() {
this.newtype = 'alert alert-' + this.type + ' fade in alert-dismissible';
},
data: function () {
return {
newtype:''
}
},
}
</script>
找到了解決方案:
<alert :loading="false" loadingtext="" type="danger" v-if="file.error">{{file.error}}</alert>
<div v-bind:class="setType(type)" role="alert">
methods: {
setType(type) {
return 'alert alert-' + type + ' fade in alert-dismissible';
}
},
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.