Vue 3 CLI Chat应用程序引导文本不会向左对齐

问题描述

我正在制作Vue应用程序，其功能的一部分是在firestore的支持下为用户提供实时聊天室。我的Vue应用程序中有npm install bootstrap和v-chat-scroll。我最初尝试在聊天室的左侧放置一些消息，而在span元素中使用v-if =“ equal_name（message）”在右侧添加一些消息（此功能在下面提供）。但这没有用。因此，我直接将class =“ text-left”分配给我的元素。但是元素仍然没有向左对齐。我不知道为什么。

    <template>
    <div class="container chat">
        <h2 class="text-primary text-center">Real-time chat</h2>
        <h5 class="text-secondary text-center">{{name}} </h5>
        <div class="card">
            <div class="card-body">
                <p class="text-secondary nomessages" v-if="messages.length == 0">
                    [no messages yet!]
                </p>
                <div class="messages" v-chat-scroll="{always: false,smooth:true}">
                    <div v-for="message in messages" :key="message.id">
                            <span class="text-info text-left">[ {{message.name}} ] : {{message.message}}</span>
                            <span class="text-secondary time">{{message.timestamp}}</span>
                    </div>
                </div>
            </div>

            <div class="card-action">
                <CreateMessage :name="name"/>
            </div>
        </div>
    </div>
</template>

下面是该Vue的脚本和样式

<script>
    import CreateMessage from "@/components/CreateMessage";
    import fb from "@/firebase/init.js";
    import moment from "moment";

    export default{
        name: "Chat",props: {
            name: String
        },components:{
            CreateMessage
        },methods:{
            equal_name(message){
                if(message.name==this.name){
                    return true;
                }else{
                    return false;
                }
            }
        },data(){
            return{
                messages: []
            }
        },created() {
            let ref = fb.collection("messages").orderBy("timestamp");
            ref.onSnapshot(snapshot => {
                snapshot.docChanges().forEach(change => {
                    change.type = "added";
                    if(change.type == "added" ){
                        let doc = change.doc;
                        this.messages.push({
                            id: doc.id,name: doc.data().name,message: doc.data().message,timestamp: moment(doc.data().timestamp).format("MMM Do YY")
                        })
                    }
                })
            })
        }
    }
</script>

<style>
.chat h2{
    font-size: 2.6em;
    margin-bottom: 0px;
    
}
.chat h5{
    margin-top: 0px;
    margin-bottom: 40px;
}
.chat span{
    font-size: 1.2em;

}
.chat .time{
    display: block;
    font-size: 0.7em;
}
.messages{
    max-height: 300px;
    overflow: auto;
    text-align: unset;
}
</style>

解决方法

我在引导程序中使用flex解决了我的问题。

<div v-if="equal_name(message)">
              <div class="d-flex flex-row">
                <div class="text-info">
                  [ {{ message.name }} ] : {{ message.message }}
                </div>

如果需要将内容向左对齐，则将flex-row与v-if一起使用。如果需要将内容右对齐，请使用flex-row-reverse和v-else

<div v-else>
              <div class="d-flex flex-row-reverse">
                <div class="text-info">
                  [ {{ message.name }} ] : {{ message.message }}
                </div>

尽管我仍然不知道为什么我不能只分配class =“ text-left”或“ text-right”来完成上述工作。