JSFiddle - React, Tailwind, and code Playground

by shubhampokhriyal

HTML

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" />

</head>

<body>
  <div id="app">

    <table class="ui celled table">
      <tr v-for="(input, index) in rows" :key="index">
        <td>
          <select class="ui search dropdown">
            <option value="">State</option>
            <option v-for="language in languages" :key='language.id' :value="language.id">{{language.name}}</option>
          </select>
        </td>
        <td>
          <select class="ui search dropdown">
            <option value="">State</option>
            <option v-for="language in languages" :key='language.id' :value="language.id">{{language.name}}</option>
          </select>
        </td>

        <td><button class="ui button red" @click="deleteRow(index)">Remove</button>
        </td>
      </tr>
    </table>
    <button type="button" class="ui basic button mb20 small" @click="addMoreCombination">
              Add new row
   </button>

  </div>


</body>

</html>

JavaScript

// Vue js code starts
new Vue({
  el: "#app",
  data: {
    languages: [{
        name: "Learn JavaScript",
        id: 1
      },
      {
        name: "Learn Vue",
        id: 2
      },
      {
        name: "Play around in JSFiddle",
        id: 3
      },
      {
        name: "Build something awesome",
        id: 4
      }
    ],
    rows: [1], //loops running by default
  },
   /********here*****/
  mounted(){
  $('.ui.dropdown').dropdown();//<---
  },
  methods: {
    addMoreCombination() { //function for adding more rows
      this.rows.push({})
      //script to append external js start here
     
      //script to append external js ends here

    },

    deleteRow(index) {
      //function to remove that particular row
      this.rows.splice(index, 1)
    }

  }
})