如何在VueJs中使用新的div推送文本？

问题描述

有人可以帮我设置这个吗？每当有人发布文字时，我都试图创建一个新的div。基本上像facebook newsFeed post。我做错了，我不知道是什么。 .postSender是否需要v-for或v-if？

 .wrapper
    .msgSender  
      .msgSenderTop
        img.avatar(src='https://www.w3schools.com/howto/img_avatar.png')
        form
          input#fname(type='text',v-model="newPost" placeholder="Whats on your mind?")
          input.submit(type='submit',value='Submit' @click="sendPost")
    .postSender
      .postSednerTop
        img.avatar(src='https://www.w3schools.com/howto/img_avatar.png')
        .infos
          h3 Your name
          p Timestamp
        hr
      .postSenderBody  
        .msg
          p {{ placeText.post }}
   
export default {
  name: "Home",data() {
   return  {
     placeText: [{ post: ''}],newPost: ''
   }
  },methods: {
    sendPost() {
      this.placeText.push(this.newPost);
      this.newPost = '';
}

解决方法

如果我理解正确，则希望用户允许添加多个帖子，并希望在下面显示它们。

第一次更改此邮政编码。

export default {
  name: "Home",data() {
    return  {
      placeText: [{ post: ''}],newPost: ''
    }
   },methods: {
    sendPost() {
      this.placeText.push(this.newPost);
      this.newPost = '';
   }
}

您已将placeText声明为array的{{1}}，但是在objects方法中，您尝试将文本推入数组，因此当您尝试获取使用sendPost的文字，您将得到placeText.post

将undefined方法更改为此

sendPost

现在，您可以在模板部分中遍历这样的帖子数组。

sendPost() {
  this.placeText.push({ post: this.newPost })
  this.newPost = ''
}

pug vue.js