VueJS dynamic variable names

Question

i have difficulties in accessing some values in my VueJS template.

Let me first show you the data JSON dataformat from the backend:

{
    "solutionType": "ABC",
    "description": "sometext", 
    "version": 1 
}, 
{
    "solutionType": "ABC", 
    "description": "sometext", 
    "version": 2
}, 
{ 
    "solutionType": "DEF", 
    "description": "sometext", 
    "version": 1 
}

I want to show a checkbox for the solutionType, for the same solutionTypes should be a select-input with the versions. When the user selects a version from the select-input, the description text area should show the corresponding text for the version. Right now it does not show a text and thats where im struggling.

The problematic area in my code is about where "Notes:" is (notes == description variable), if you guys have also a better solution for the select-input youre welcome =)

i prepared a fiddle for this right here

but here is the code i have so far

<div id="app">
    availableSolutions {{ this.availableSolutions }}
    <div 
        class="row" 
        v-for="solutionType in this.availableSolutionTypes"
    >
        <div class="col">
          <div 
              class="row" 
              :id="solutionType + 'Row'"
          >
            <div class="container">
              <div class="row">
                <div class="col-sm">
                  <label :for="solutionType">
                    <input 
                        type="checkbox" 
                        class="" 
                        :id="solutionType" 
                        :value="solutionType" 
                        v-model="checkedSolutions"
                    />
                    SolutionType{{ solutionType }}
                  </label>
                </div>
                <div class="col-sm">
                    <select 
                        :ref="solutionType + 'Version'"
                        :key="solutionType.version"  
                        :v-model="solutionType + 'Version'" 
                        @change="onChange($event, solutionType)"
                    >
                        <option 
                            v-for="version in getVersionsForSolutionType(solutionType)" 
                            :value="version"
                         >
                             {{ version }}
                         </option>
                    </select>
                </div>
                <div class="col-sm">
                    <span 
                        :ref="solutionType + 'Description'" 
                        :v-model="solutionType + 'Description'" 
                        :key="solutionType + 'Description'"
                    >
                        Notes: {{ solutionType + 'Description' }}
                    </span>
                </div>
              </div>
            </div>
        </div>
    </div>
    checkedSolution {{ this.checkedSolutions }}
</div>

new Vue(
    {
        el: "#app",
        data: function() {
            return {
                availableSolutions: [
                    { 
                        "solutionType": "ABC", 
                        "description": "sometext", 
                        "version": 1
                    }, 
                    {
                         "solutionType": "ABC", 
                         "description": "sometext", 
                         "version": 2
                    }, 
                    { 
                         "solutionType": "DEF", 
                         "description": "sometext", 
                         "version": 1
                    }
                ],
                availableSolutionTypes: [
                    "ABC", 
                    "DEF"
                ],
                checkedSolutions: [],
            }
        },
        methods: {
            getVersionsForSolutionType(solutionType) {
                var versions = [];

                for (let index = 0; index < this.availableSolutions.length; index++) {
                    var solution = this.availableSolutions[index];

                    if (solution.solutionType === solutionType) {
                        versions.push(solution.version);
                    }
                };

                console.log("Versions for " + solutionType + ": " + versions);
                return versions;
            },
        }
    }
)

What i am trying so far is to do something like this building a dynamic variable and anywhere else it does work to access the variable

• Notes: {{ solutionType + 'Description' }}

but unfortunately that does not work in the given moustache Sytax. I have no idea to bypass this. Any help is appreciated.

Thanks in advance

Answer 1

I think using an array would be the easiest solution. I have modified your code a bit , see if that works for you

<div id="app">

availableSolutions {{ this.availableSolutions }}

<div class="row" v-for="(solutionType, ind) in this.availableSolutionTypes">
        <div class="col">
          <div class="row" :id="solutionType + 'Row'">
            <div class="container">
              <div class="row">
                <div class="col-sm">
                  <label :for="solutionType">
                    <input type="checkbox" class="" :id="solutionType" :value="solutionType" v-model="checkedSolutions"/>
                    SolutionType{{ solutionType }}
                  </label>
                </div>
                <div class="col-sm">
                  <select v-model="verDesc[ind].ver" @change="selChange(ind)">
                    <option v-for="version in getVersionsForSolutionType(solutionType)" :value="version" > {{ version }}</option>
                  </select>
                    <!-- selected version {{ $refs[solutionType + 'Version'][0].value }} -->
                </div>
                <div class="col-sm">
                  <span :ref="solutionType + 'Description'" v-model="verDesc[ind].desc" :key="solutionType + 'Description'"> Notes: {{verDesc[ind].desc }} </span>
                  
                  
                  <!-- <span :key="solutionType + 'Version'" :set="descriptions = getDescriptionsForSolutionType(solutionType)">Notes: {{ descriptions[$refs[solutionType + 'Version'][0].value] }}</span> -->
                  <!-- <span :key="solutionType + 'Version'" :set="descriptions = getDescriptionsForSolutionType(solutionType)">Notes: {{  $refs[solutionType + 'Version'][0].value }}</span> -->
                </div>
              </div>
            </div>
          </div>
          <br>
        </div>
checkedSolution {{ this.checkedSolutions }}
</div>

and corresponding script

new Vue({
  el: "#app",
  data: function() {
    return {
            availableSolutions: [{ "solutionType": "ABC", "description": "sometext1", "version": 1 }, { "solutionType": "ABC", "description": "sometext2", "version": 2 }, { "solutionType": "DEF", "description": "sometext", "version": 1 }],
      availableSolutionTypes: ["ABC", "DEF"],
      verDesc:[{
          ver:1,
          desc:'sometext1'
      }, {
          ver:1, 
          desc:'sometext1'
      }],
      checkedSolutions: [],
    }
  },
  methods: {
    getVersionsForSolutionType(solutionType){
      var versions = [];
      for (let index = 0; index < this.availableSolutions.length; index++) {
        var solution = this.availableSolutions[index];
        if (solution.solutionType === solutionType) {
          versions.push(solution.version);
        }
      };
      console.log("Versions for " + solutionType + ": " + versions);
      return versions;
    },
    selChange(ind){
     for( let i = 0; i<this.availableSolutions.length; i++){
       if(this.availableSolutions[i].version===this.verDesc[ind].ver){
           this.verDesc[ind].desc = this.availableSolutions[i].description;
           return;
       }
     }
    }
  }
})

I have declared a new object array verDesc of same length availableSolutionTypes and binding object of this array to the select and note value.