[Vuejs]-Create elements and querySelector doesn't work in VueJS

by

0👍

Vue uses declarative rendering to show data. It has a templating system that is very straightforward and I recommend you read this – https://v2.vuejs.org/v2/guide/

This link will then help you in rendering your list – https://v2.vuejs.org/v2/guide/list.html

0👍

Why don’t you do it the VueJS way. For instance

new Vue({
  el: '#demo',
  data: {
    chatSample: [{
        'name': '<b>Chuan</b> | Male | 30 | Subang Jaya',
        'message': 'Who is there?'
      },
      {
        'name': 'Police',
        'message': 'Police '
      },
      {
        'name': '<b>Chuan</b> | Male | 30 | Subang Jaya',
        'message': 'What do you want?'
      },
      {
        'name': 'Police',
        'message': 'We want to talk.'
      },
      {
        'name': '<b>Chuan</b> | Male | 30 | Subang Jaya',
        'message': 'How many of you are there?'
      },
      {
        'name': '<b>Chuan</b> | Male | 30 | Subang Jaya',
        'message': 'How many of you are there?'
      },
      {
        'name': '<b>Chuan</b> | Male | 30 | Subang Jaya',
        'message': 'How many of you are there?'
      },
      {
        'name': 'Police',
        'message': 'Two.'
      },
      {
        'name': '<b>Chuan</b> | Male | 30 | Subang Jaya',
        'message': 'So talk with each other'
      }
    ]
  }
})
<div id="demo">
  <div class="chat-size col-centered margin-btm-50">
    <div class="row chat-row margin-chat none" v-for="(chat, idx) in chatSample" :key="idx">
      <div class="name text-left padding-chat-left" v-html="chat.name"></div>
      <div class="chat-left" v-html="chat.message"></div>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>

You can add conditional classes using :class attribute from Vue.

Leave a comment