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背后的想法是你的模型驱动视图中的内容。如果它在您的模型中消失，它会在您的视图中消失。如果您希望它出现在您的视图中，它应该出现在您的模型中。

在Vue中呈现只读内容的最佳方法

1 个答案: