Question

我喜欢Vue，经常用它在选择框中列出选项（或者有时在Flexbox中使用div）。我想知道是否有一种方法可以在Vue列表渲染期间将片段从for循环中分离出来。像这种情况：

我有3个选择：

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

我想在一个选择框中以及在该选择框下方的一个div中渲染它们，具体取决于选择哪个选项，一个不同的div（在此示例中为所选选项的颜色）。

是否可以在Vue列表渲染中执行此操作？

类似

<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列表渲染在列表外部渲染组件，使其保持链接到列表中的组件。

Answer 1

您可以通过在v-model元素上使用select来选取所选选项的值并将其插入到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>

Answer 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>

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

2 个答案: