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

Question

有人可以帮我设置吗？每次有人 post 发送文本时，我都试图创建一个新的 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 = '';
}

Answer 1

如果我理解正确，你希望用户允许添加多个 post 并且你想在下面显示它们。

首先修改这段代码。

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

您已将 placeText 声明为 objects 的 array，但在 sendPost 方法中您正试图将文本推送到数组中，因此当您尝试要使用 placeText.post 获取文本，您将得到 undefined

将 sendPost 方法更改为此

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

现在，在您的模板部分，您可以像这样遍历 post 的数组。

<div v-for="(item, index) in placeText" :key="index" class="message-send-body">
  <div class="msg" >
    {{item.post}}
  </div>
</div>

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

How do I push text with new div in VueJs?

vue.js

pug

vuejs2