Vue.js动态更改道具

Question

我有一个组件上传，并且将其传递给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>

Answer 1

找到了解决方案：

<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';
    }
},