vue.js - Vue.js：v-for 的替代索引

Question

https://jsfiddle.net/4faecf49a1e9/Lmbkdpc2/

<div id="nest">

  <h2>Fill input for blocks appearance or disappearance</h2>
  <div id="element_inputs">
    <input v-for="net, index in elements" v-model="elements[index].value" />
  </div>

  <div id="elements_render">
    <div v-for="bl, index in elements_list" v-if="elements[bl].value !== ''" :style="{ 'backgroundColor': colors_list[index] }" class="block">{{index}}</div>
  </div>

  <h2>Write colors here (example: yellow, pink, orange)</h2>
  <input id="colors" type="" name="" v-model="recoloring" />
</div>

var lay = new Vue({
  el: '#nest',
  props: ["recoloring"],
  data: {
    elements: {
      'box1': { value: 'first' },
      'box2': { value: '' },
      'box3': { value: '' },
      'box4': { value: '' }
    },
    elements_list: ['box1', 'box2', 'box3', 'box4'],
    colors_list: []
  },
  watch: {
    recoloring: function (arg) {
      this.colors_list = arg.split(',')
    }
  }
});

如果它们的链接输入已填充，我正在尝试创建块的外观（如果它们的输入为空，我们不会渲染块）。这项工作已经完成，但很长时间以来，当人们可以在特殊输入中创建自己的颜色列表时，我一直遇到块“正确”着色的问题。例如，您在此输入中写入“黄色、粉红色、橙色”并为这些块外观填充 1,2 和 4 个输入 (v-if)。3 输入为空，因此无法显示。问题是我将 1 和 2 重新着色，但 4 具有默认颜色，因为重新着色会影响隐藏的 3 块，而我需要按顺序排列前 3 个块（无论 3 个是否存在）。我不能按照默认索引从事这项工作。在这种情况下，如果我在 4 之后填充 3 输入，则必须失去颜色并在 (3) 之前“给”它阻塞，而我不会在橙色之后写新颜色，例如“黄色、粉红色、橙色、蓝色”

我怎么能这样做？我可以用索引做什么？

谢谢！

标签： vue.jsvuejs2v-for