Vue

by Christopher O

HTML

<div id="app">
  <h2>Todos:</h2>
  {{todos}}
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
    todos: new Object(),
    
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  },
  mounted(){
  	let self = this;
  	self.todos = { // testing
                "a": { "d": 1578101987, "id": "5e0fece379ed9927100e5e27", "b": "Waaaaa%3F%20%F0%9F%99%82" },
                "b": { "b": "Hi, thanks for contacting us! We'll review your message and reply soon.", "d": 1578101988, "s": "0", "id": "5e0fece379ed9927100e5e26", "mi": "1213273789563310080" },
                "c": { "id": "5e0fed1879ed997d9223a1c8", "d": 1578102039, "h": 300, "me": "/img-demo/love.gif" },
                "5e0fed2979ed99270f5662f8": { "me": "/img-demo/sleepy.png", "h": 300, "d": 1578102056, "id": "5e0fed2979ed99270f5662f8", "s": "0" },
                "d": { "d": 1578101987, "id": "5e0fece379ed9927100e5e30", "b": "Great%3F%20%F0%9F%99%82" },
            };
            
     self.todos['a'+Date.now()] = 'xxxx'; 
  }
});

let ding = new Audio('https://web.chatfully.io/audio/insight.mp3');
ding.play();