Question

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

让我首先向您展示后端的数据JSON数据格式：

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

我想显示一个solutionType的复选框，因为相同的solutionTypes应该是带有版本的select-input。当用户从选择输入中选择一个版本时，描述文本区域应显示该版本的相应文本。现在，它不显示文本，多数民众赞成在哪里挣扎。

我的代码中有问题的地方是“ Notes：”的位置（notes == description变量），如果你们也有一个更好的选择输入欢迎您的解决方法=）

我为此权利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'}}

但不幸的是，这不适用于给定的胡须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，并将此数组的对象绑定到select和note值。

VueJS动态变量名称

1 个答案: