VueJS 动态变量名

Question

我在访问我的 VueJS 模板中的某些值时遇到了困难。

我先给你看一下后端的数据 JSON 数据格式：

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

我想为解决方案类型显示一个复选框，因为相同的解决方案类型应该是版本的选择输入。 当用户从选择输入中选择一个版本时，描述文本区域应该显示该版本的相应文本。现在它没有显示文本，这就是我挣扎的地方。

我的代码中的问题区域是关于“注释：”的位置（注释 == 描述变量），如果你们也有更好的选择输入解决方案，欢迎您 =)

我为此准备了一把小提琴here

但这是我目前的代码

<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;
            },
        }
    }
)

到目前为止，我正在尝试做这样的事情，构建一个动态变量，并在其他任何地方都可以访问该变量

• 注释：{{ solutionType + 'Description' }}

但不幸的是，这在给定的 mustache Sytax 中不起作用。我不知道绕过这个。任何帮助表示赞赏。

提前致谢

Answer 1

我认为使用数组是最简单的解决方案。我已经修改了你的代码，看看是否适合你

<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>

及对应的脚本

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;
       }
     }
    }
  }
})

我已经声明了一个新的对象数组verDesc，长度相同availableSolutionTypes，并将这个数组的对象绑定到选择和注释值。