JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="app">
  <div>
    <div v-for="(value, key, index) in chats">
      {{value}}, key : {{key}}, index: {{index}}
      <button @click="addIndex(index)">=</button>
    </div>
    {{orders}}
  </div>

</div>

JavaScript

var data = {
  'chat1': {
    'messages': ['message1', 'message2', 'message3']
  },
  'chat2': {
    'messages': ['message1', 'message2', 'message3']
  },
  'chat3': {
    'messages': ['message1', 'message2', 'message3']
  },
  'chat4': {
    'messages': ['message1', 'message2', 'message3']
  }
}
new Vue({
  el: '#app',
  created: function() {
    this.chats = data;
  },
  data: function() {
    return {
      chats: {},
      orders: []
    }
  },
  methods: {
    addIndex: function(index) {
      if (!this.orders.includes(index)) {
      	this.orders.push(index)
      }
    }
  }
})