Vue 3 CLI 聊天應用程序引導文本不會向左對齊

Question

我正在制作一個 Vue 應用程序，它的 function 的一部分在 firestore 的支持下為用戶提供了一個實時聊天室。 我有 npm 在我的 Vue 應用程序中安裝引導程序和 v-chat-scroll。 我最初嘗試在聊天室的左側放置一些消息，而在右側使用 span 元素中的 v-if="equal_name(message)" 放置一些消息（下面提供了此 function）。 但它沒有用。 所以我直接將 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>

Answer 1

我已經在引導程序中使用 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" 來做上面的事情。