Vue

by mohdgadi

HTML

<div id="app">

  <div v-for="namespace in getNamespaceList" v-bind:key="namespace.id">

    <!--            Select the Parameter-->
    <div class="set">

      {{namespace.label}}<br />

      <select @change="updateParameter($event, namespace.id)" v-model="currParameterValues[namespace.id]">
        <option v-for="parameter in getParametersList(namespace.id)">{{parameter.label}}</option>
      </select>

      <select v-model="currOperatorValues[namespace.id]">
        <option v-for="property in getPropertyList">{{property.label}}</option>
      </select>

    </div>
  </div>

</div>

CSS

.set{
  margin-bottom:20px;
}

Vue

new Vue({
  el: "#app",
  data: {
            showDynamicModal: false,
        abcd: '',
        selectedNamespaceValue: '',
        currParameterValues: [],
        currOperatorValues: [],
        currValValues: [],
        chosenNamespaces: [],
        responseList: [],
        customInputValue: '',
        selectedParameter: [],
        selectedPropertyType: [],
        selectedPropertyValue: [],
        selectedPropertySubValue: '',
        showCustomInput: false
  },
  methods: {
  getParametersList (namespaceID) {
        let arr = [{name: '', label: '', id: ''}]
        for (let i = 0; i < this.getResponseList.length; i++) {
          let obj = this.getResponseList[i]
          if (obj.namespaceID === namespaceID) {
            arr.push({name: obj.name, label: obj.name, id: obj.id})
          }
        }

        return arr
      },
  	updateParameter (data) {
        for (let i = 0; i < this.getResponseList.length; i++) {
          let obj = this.getResponseList[i]
          if (obj.id === data) {
            this.currParameterValues[obj.namespaceID] = data
            this.$set(this.currOperatorValues, obj.namespaceID, obj.operator)
          }
        }
      },
      updatePropertyType (data, id) {
        let obj = this.currValues[id]
        if (obj.operator !== data) {
          obj.operator = data
          obj.val = ''
          this.$set(this.currValues, id, obj)
        }
      },
      updateVal (data, id) {
        let obj = this.currValues[id]
        for (let i = 0; i < this.responseList.length; i++) {
          if (this.responseList[i].id === obj.id) {
            this.responseList[i].operator = obj.operator
            this.responseList[i].val = data
            return
          }
        }
      }
  },
  computed: {
  	    getNamespaceList () {
        return [
            {default: false, label: 'weather', id: '151080013'},
          {default: false, label: 'cricbuzz', id: '151040017'}]
      },
      getResponseList () {
        return...