【发布时间】：2019-12-28 22:45:29
【问题描述】：
首先，我为我提出问题的方式道歉。我找不到用一句话来形容它的方法。所以，请允许我解释一下。
我有一个 API，其中有数千个项目在 v-for 中循环。用户一次只能从集合中选择一个。单击它后，它将与其他一些数据一起显示在一个单独的位置（* ，所以这不是字符串插值的情况。它是一个对象。我只是简化了我的 jsfiddle 中的代码来实现它更少的混乱和无依赖运行）
我在 API 中添加了一个布尔属性来切换它的真/假，以及一个执行切换的方法函数。并且在一些 v-if 和 v-show 指令的帮助下，当它们为假时，我将隐藏其他元素以防止渲染。
<div id="app">
<div uk-grid class="card-body">
<div class="uk-width-1-4@m">
<div>1. Select an Item</div>
<div class="pods" v-for="pod in pods" :key="pod.id" :id="pod.id">
<div class="ws-in-col" v-for="workstations in pod.workstations" :key="workstations.id" :id="workstations.id" @click="selectWS(workstations, pod)">
<div class="ws ws-number uk-text-default">{{workstations.number}}</div>
</div>
</div>
</div>
<div class="uk-width-1-4@m">
<div>2. Selected Item</div>
<div class="pods" v-for="pod in pods" :key="pod.id" :id="pod.id" v-show="pod.selected===true">
<div class="ws-in-col" v-for="workstations in pod.workstations" :key="workstations.id" :id="workstations.id" v-show="workstations.selected===true">
<div v-if="workstations.selected === true">
<div class="group">
<div class="ws ws-number uk-text-default">{{workstations.number}}</div>
<div class="ws ws-number uk-text-default">{{workstations.text}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
在脚本中
methods: {
selectWS(workstations, pods) {
pods.selected = !pods.selected;
workstations.selected = !workstations.selected;
}
}
但是，不仅很乱而且菜鸟。是马车。它起作用的唯一方法是，如果用户单击一项以显示它，然后再次单击以将其关闭，然后再单击另一项以将其打开。这远非用户友好。
我怎样才能以更干净和专业的方式解决这个问题，这样如果用户点击 1.1，它会显示 1.1，如果他想看到 1.2，他所要做的就是点击 1.2 而不必先关闭 1.1 ?
这是JSFIDDLE 复制我的问题
谢谢各位。成为这个地方唯一的 Vue 开发人员很难。
【问题讨论】：