javascript - 在 Vue 中渲染只读内容的最佳方法

Question

我有以下代码，用于在 2 个用户之间呈现消息

 <template>
    <main>
        <form action="" method="post" @submit.prevent="sendMessage">
            <textarea name="message" id="message" cols="30" rows="10" placeholder="Message"> </textarea>
            <input type="submit" value="Send">
        </form>    
        <section v-if="messages.length">
            <div v-for="message in messages">
                    {{message.body}}
                    <hr>
            </div>    
        </section>
        <section v-else>
                No messages
        </section>
    </main>
</template>
<script>
    import ajax from './ajax';
    export default {
        data () {
            return {                  
                messages: []
            }
        },
        methods: {
            sendMessage(e){                    
            },
            getMessages(pageNum, cb){
                ajax({
                         url: `${window.location.pathname}?p=${pageNum}`,
                         method: 'get',
                         callback(res){
                             cb(JSON.parse(res)); 
                         }
                     })
            }

        },
        created(){
            var vm = this;
            vm.getMessages(1, (res) => {
                vm.messages = res.data;
                vm.loaded=true;

            });

        }
    }
</script>

特别是代码v-for="message in messages"，我的组件中的message属性。 这些消息将是只读的，因此不会有事件监听器或任何东西。因此，在 ajax 调用后将它们保留在数组中并不是最好的方法。但是，将有一个加载更多按钮，在调用中加载 10 条消息，并将这些消息附加到数组中。

所以我想问如何在渲染后不将消息保留在数组中但仍将它们保留在页面上的情况下进行此操作？ 或者，如果您能提出一个更好、更有效的方法来实现这一点，我将不胜感激。

谢谢。

Answer 1

Vue 背后的想法是你的模型驱动 View 中的内容。如果它在你的模型中消失，它也会在你的 View 中消失。如果您希望它出现在您的 View 中，那么它应该出现在您的模型中。