如何将 Vue 组件从列表渲染中拆分出来？

Posted 2023-02-23

【中文标题】如何将 Vue 组件从列表渲染中拆分出来？

【英文标题】：How to split Vue components out of a list-rendering?

【发布时间】：2019-07-10 02:29:39

【问题描述】：

我喜欢 Vue，并且经常使用它在选择框中列出选项（或者有时在弹性框中列出 div）。我想知道是否有办法在 Vue 列表渲染期间将一块从 for 循环中拆分出来。像这样的场景：

我有 3 个选择：

选项 1 - 蓝色 选项 2 - 绿色 选项 3 - 紫色

我想在选择框和选择框下方的 div 中呈现这些，具体取决于选择的选项，不同的 div（在本例中使用所选选项的颜色）。

有没有办法在 Vue-list 渲染中做到这一点？

类似

<select>
    <option v-for="color in colors">color.color</option>
</select>

<div>color.color</div> <--This doesn't work, as it is out of the for loop

---

我能够解决这个问题的唯一方法是制作一个对象来容纳所有这些东西和一个像这样的“活动元素”：

class ColorHolder
    constructor()
        colors = []
        activeColor = ;
    

然后，我将侦听器放在<option> 框中的每种颜色上，将活动颜色设置为点击的任何颜色。然后我有一个隐藏组件，当他们单击选项列表中的颜色时会显示该组件。

它有效，但似乎必须有更好的方法，因为我必须手动确定单击了哪种颜色并显示正确类型的 <color-div>。我只想使用 Vue 列表渲染来渲染列表之外的组件，使其与列表中的组件保持链接。

【参考方案1】：

您可以通过在 select 元素上使用 v-model 来选择所选选项的值并将其插入到您的 div 中来简化事情。

new Vue(
  el: "#app",
  data: 
    colors: [
    color: 'Red',
    color: 'Green',
    color: 'Blue'
    ],
    selectedColor: 'Red'
  
)

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>

<div id="app">
  <select v-model="selectedColor">
    <option v-for="color in colors" :value="color.color"> color.color </option>
  </select>
  <div :style="background: selectedColor"> selectedColor </div>
</div>

【参考方案2】：

支持@husam 的回答

我建议不要使用 selectedColor 值。你应该使用索引（数组）或键（对象），这样你就不会重复数据（在更大的应用程序中）

new Vue(
  el: "#app",
  data: 
    colors: [
    color: 'Red',
    color: 'Green',
    color: 'Blue'
    ],
    colIndex: 0
  
)

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.min.js"></script>

<div id="app">
  <select v-model="colIndex">
    <option v-for="color, i in colors" :value="i"> color.color </option>
  </select>
  <div> colors[colIndex].color </div>
</div>

你也可以使用计算值

new Vue(
  el: "#app",
  data: 
    colors: [
    color: 'Red',
    color: 'Green',
    color: 'Blue'
    ],
    colIndex: null
  ,
  computed: 
    selectedColor() 
      return this.colors[this.colIndex] || ;
    
  
)

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.min.js"></script>

<div id="app">
  <select v-model="colIndex">
    <option v-for="color, i in colors" :value="i"> color.color </option>
  </select>
  <div> selectedColor.color </div>
</div>

【讨论】：

这是一个不错的解决方案，至少对于选择框。如果不是<option> 元素，而是循环呈现<divs> 怎么办？有没有办法模仿 div 上的v-model？