如何在 Vue.js 模板中定义一个临时变量

Question

这是我当前的模板：

 <a-droppable v-for="n in curSize" :key="n - 1" :style="{width: `${99.99 / rowLenMap[orderList[n - 1]]}%`, order: orderList[n - 1]}">
  <a-draggable :class="{thin: rowLenMap[orderList[n - 1]] > 10}">
    <some-inner-element>{{rowLenMap[orderList[n - 1]]}}</some-inner-element>
  </a-draggable>
</a-droppable>

问题是我要多次写 rowLenMap[orderList[n - 1]] ，恐怕vue.js引擎也会计算多次。

我想要的是这样的：

 <a-droppable v-for="n in curSize" :key="n - 1" v-define="rowLenMap[orderList[n - 1]] as rowLen" :style="{width: `${99.99 / rowLen}%`, order: orderList[n - 1]}">
  <a-draggable :class="{thin: rowLen > 10}">
    <some-inner-element>{{rowLen}}</some-inner-element>
  </a-draggable>
</a-droppable>

我认为从技术上实现并不难，因为它可以通过使用类似 v-for="rowLen in [rowLenMap[orderList[n - 1]]]" 的东西来笨拙地解决。那么有没有简洁官方的解决方案呢？

原文由 silvestris 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

curSize 是一个数组。您的临时值包含相应的隐含数组 sizedOrderList = curSize.map(n => orderList[n-1]) 。如果您将其定义为计算，您的 HTML 将变为

<a-droppable v-for="n, index in sizedOrderList" :key="curSize[index]" :style="{width: `${99.99 / rowLenMap[n]}%`, order: n}">
  <a-draggable :class="{thin: rowLenMap[n] > 10}">
    <some-inner-element>{{rowLenMap[n]}}</some-inner-element>
  </a-draggable>
</a-droppable>

原文由 Roy J 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我找到了一种非常简单（几乎是神奇）的方法来实现这一点，它所做的只是定义一个内联（局部）变量，其中包含您要多次使用的值：

 <li v-for="id in users" :key="id" :set="user = getUser(id)">
  <img :src="user.avatar" />
  {{ user.name }}
  {{ user.homepage }}
</li>

注意： set 不是 Vuejs 中的特殊道具，它只是用作我们变量定义的占位符。

Source : https://dev.to/pbastowski/comment/7fc9

CodePen : https://codepen.io/mmghv/pen/dBqGjM

---

更新：基于 @vir us 的评论

这不适用于事件，例如 @click="showUser(user)" 不会传递正确的用户，而是始终是最后评估的用户，这是因为 user 临时变量将重新获得在循环的每个圆圈上使用和替换。

所以这个解决方案只适用于模板渲染，因为如果组件需要重新渲染，它将再次重新评估变量。

但是 如果你真的需要将它与事件一起使用（虽然不推荐），你需要定义一个外部数组来同时保存多个变量：

 <ul :set="tmpUsers = []">
  <li v-for="(id, i) in users" :key="id" :set="tmpUsers[i] = getUser(id)" @click="showUser(tmpUsers[i])">
    <img :src="tmpUsers[i].avatar" />
    {{ tmpUsers[i].name }}
    {{ tmpUsers[i].homepage }}
  </li>
</ul>

https://codepen.io/mmghv/pen/zYvbPKv

学分： @vir 我们

虽然在这里基本上复制 users 数组没有意义，但这在您需要调用昂贵的函数来获取数据的其他情况下可能很方便，但我认为您最好使用 computed 属性然后构建数组。

原文由 Mohamed Gharib 发布，翻译遵循 CC BY-SA 4.0 许可协议