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(',')
    }
  }
});

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

我该怎么做？我可以使用索引做什么？

谢谢！

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

0 个答案: