Как мне вставить текст с новым div в VueJS?

#vue.js #vuejs2 #pug

Вопрос:

Может кто-нибудь помочь мне настроить это? Я пытаюсь создать новый div каждый раз, когда кто-то публикует текст. В основном что-то вроде публикации Facebook в новостной ленте. Я делаю что-то не так, я не знаю, что. Нужен ли мне v-for или v-if для .postSender ?

  .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 = '';
}

1. Вы пытаетесь использовать push для объекта. placeText это объект, вы не можете использовать push метод для него. Попробуйте изменить его на array

2. Я отредактировал свой пост, должно ли это работать таким образом? Также как я могу создавать новый .postSender div каждый раз, когда я отправляю сообщение?

3. Нет. Измените placeText на array и вставьте в него новые записи. И я не вижу, чтобы вы где-либо повторяли placeText . Вы должны использовать v-for="(post, index) in placeText" .

Ответ №1:

Если я правильно понимаю, вы хотите, чтобы пользователь разрешил добавлять несколько сообщений, и вы хотите показать их ниже.

Сначала измените этот фрагмент кода.

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

Вы объявили placeText как array of objects , но в sendPost методе вы пытаетесь вставить текст в массив, поэтому, когда вы попытаетесь получить текст с помощью placeText.post , вы получите undefined

Измените sendPost метод на этот

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

Теперь в вашей части шаблона вы можете выполнять итерации по массиву сообщений, подобных этому.

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

1. Есть ли способ отобразить текст обычным способом, например, так? [ " text.." ]

2. Извините, но о каком тексте вы говорите,

3. неважно, что-то не так. Теперь все исправлено.