JSFiddle - React, Tailwind, and code Playground

by tadeyemi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<div id="app">
  <h1>Finds</h1>
  <div>
    <input ref="option">
  </div>
  <button v-if @click="addFind">
    New Find
  </button>

  <p v-for="(option,idx) in options.slice(1)">
    <span @click="removeOption(idx+1)">Option{{idx+1}}: {{option}}</span>
  </p>

  <!-- <pre>{{ $data }}</pre> -->
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    options: [],
    count:0
  },
  methods: {
    addFind: function () {
    var msg = this.$refs.option.value;
    console.log(this.options);
    if( msg.trim() != "" ){
    	this.count++;
    	var i = this.count;
      this.options[i]= this.$refs.option.value.trim();
 	}
    },
    removeOption:function(index){
    
    this.options.splice(index,1);
    this.count--;
    
    }
  }
});