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 变量中有要控制的 divsion name 属性。 如何为 divName 属性赋值？ （例如 this.eval(divName) = false）

Answer 1

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

在任何情况下，编号变量名称（ this.divReportsX其中X是一个变量）几乎总是表明您应该使用数组而不是单个标量。

在下面的示例中，我使用v-for的范围形式来计算我的 div 从 1 到 3（或者你想要的任意多个）。 有selectedReport指示显示哪个 div。 只是为了好玩，我包含了一个计算的showHide ，它为您提供了一个由 div 编号索引的布尔值，因此您可以使用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>