JSFiddle - React, Tailwind, and code Playground

by robert chang

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.16.6/lodash.min.js"></script>
<div id="editor">
  <child :pstore="localStore"></child>
</div>

CSS

html, body {
  margin: 0;
  height: 100%;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #333;
}
.add,.remove{
    cursor: pointer;
    color: white;
}
.add{
  background-color: blue;
}
.remove{
  background-color: red;
}

Babel + JSX

let child = {
	props: ['pstore'],
  data: function(){
  	return {
    	ids: [1,2,3]
    }
  },
  template: `
  <div>
  	<p v-for="(id,index) of ids">{{ id }}  
       <span v-show="!iAmInParent(id)" class="add" @click="addMe(id)">+</span><span v-show="iAmInParent(id)" class="remove" @click="removeMe(id)">-</span> </p>
  </div>`,
  methods: {
  	iAmInParent: function(id){
    	  let self = this
        let index = _.findIndex(self.pstore.idAddedByChild,function(o){
        	return o == id
        })
        console.log(index)
        if (index==-1){
           return false
        }else{
           return true
        }
    },
    addMe:function(id){
      this.pstore.idAddedByChild.push(id)
      console.log(this.pstore.idAddedByChild)
    },
    removeMe:function(id){
      let self = this
      let index = _.findIndex(self.pstore.idAddedByChild.ids,function(o){
        	return o == id
        })
      self.pstore.idAddedByChild.splice(index,1)
    }
  }
}

new Vue({
  el: '#editor',
  data: {
  	localStore: {
      idAddedByChild: []
  }},
  components: {child}
})