Vue.js: альтернативный индекс для v-for - PullRequest
Новая
       5

Vue.js: альтернативный индекс для v-for

0 голосов
/ 02 ноября 2018

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). Я не могу идти в этой работе по индексу по умолчанию. В этом случае, если я заполняю 3 ввода после 4, я должен потерять цвет и «дать» его блокировать до (3), пока я не пишу новый цвет после оранжевого, например, «желтый, розовый, оранжевый, синий»

Как я могу это сделать? Что я могу сделать с индексом?

Спасибо!

...