javascript - Vue.js:如何根据另一个属性更改一组属性

Question

我有一组名为 divReports0、divReports1、divReports2 等的分区。这些也是我的 vue 模型中的属性。我想根据从 SELECT 框中选择的值显示/隐藏这些分区，该值可在 selectedReport 属性中找到。这是我遇到问题的代码。

    showHideDivision: function()
    {
        for (var j=0; j < this.reportsList.length; j++) 
        {
            var divName = 'divReports' + this.reportsList[j]['value'];
            if (this.reportsList[j]['value'] == this.selectedReport)
            {
                console.log('Show:' + divName );
                //this.divReports+eval(this.reportsList[j]['value']) = true
            }   
            else
            {
                console.log('Hide:' + divName );
            }
        }

    },

我有要在 divName 变量中控制的分区名称属性。如何为 divName 属性赋值？ (例如 this.eval(divName) = false)

Answer 1

由于目标是一次只显示一个 div，因此您应该有一个变量来指示要显示哪一个，而不是为每个 div 指定一个 bool 值来指示是否显示。

无论如何，对变量名称进行编号(this.divReportsX，其中 X 是一个变量)几乎总是表明您应该使用数组而不是单个标量.

在下面的示例中，我使用 range form of v-for将我的 div 从 1 数到 3(或者您想要的任意数量)。有 selectedReport 来指示显示哪个 div。只是为了好玩，我添加了一个计算的 showHide，它为您提供一个按 div 编号索引的 bool 值，以便您可以使用 v-show=showHide[div]

new Vue({
  el: '#app',
  data: {
    howManyDivs: 3,
    selectedReport: 1
  },
  computed: {
    showHide() {
      const result = [];

      for (let i=1; i <= this.howManyDivs; ++i) {
        result[i] = i === this.selectedReport;
      }
      return result;
    }
  }
});

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <select v-model="selectedReport">
    <option v-for="div in howManyDivs" :value="div">Show {{div}}</option>
  </select>
  <div v-for="div in howManyDivs" v-show="showHide[div]">
    Report div
    <h1>** {{div}} **</h1>
  </div>
  <div v-for="div in howManyDivs">
    {{div}}: {{showHide[div]}}
  </div>
</div>