Vue JS Вычисляемое свойство возвращает неверный результат - PullRequest
Новая
       71

Vue JS Вычисляемое свойство возвращает неверный результат

0 голосов
/ 26 мая 2020

Я застрял в задаче, данной мне на Vue JS, и не знаю, что не так с этим кодом.

Задача генерирует динамическую c таблицу с фоном из 5 столбцов 4 цвета: красный, синий, желтый, зеленый. Когда l oop столбца дойдет до 5-го столбца, тогда на него следует поместить красный цвет фона, а следующая строка продолжится синим, желтым, зеленым, красным цветом. 

new Vue({
  el: '#app',
  data: {
    tableRows: ['Table Row 1'],
    counter: 1,
    bgColor: ['red', 'blue', 'yellow', 'green'],
    fontSize: '30',
    colNumber: 0,
    maxColumn: 5,
  },

  computed: {
    bgColorComputed: function() {

      if (this.colNumber == 4) {
        this.colNumber = 0;
        return this.bgColor[this.colNumber];
      }

      return this.bgColor[this.colNumber];
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <table border="1" width="500px" height="300px">
    <tr v-for="(content, index) in tableRows">
      <td v-for="colorIndex in maxColumn" :style="{ backgroundColor: bgColorComputed }"> 
        bgColorComputed : {{ bgColorComputed }} <br> <br> 
        row count {{ counter }} <br> 
        column count {{ colNumber = colorIndex - 1 }}
      </td>
    </tr>
  </table>
</div>

Вывод этого кода: красный, красный, синий, желтый, зеленый вместо красного, синего, желтого, зеленого, красного.

Почему красный цвет появляется два раза, а возвращаемый computedBgColor - красный, синий, желтый, зеленый?

1 Ответ

0 голосов
/ 26 мая 2020

Вычисленные свойства кэшируются. Вы пытаетесь использовать одно свойство bgColorComputed для одновременного представления множества разных цветов. Он не предназначен для использования.

Вместо этого вы можете переместить свой код в метод, а затем вызвать метод несколько раз (по одному разу для каждого столбца).

Дополнительные проблемы:

  • То, как вы отслеживали свои индексы, было ненадежным. Вместо проверки наличия if (this.colNumber == 4) в качестве особого случая лучше использовать оператор модификации this.bgColor[colorIndex % this.bgColor.length]. Это будет работать для любого столбца, а не только для 4.

  • Ваш начальный индекс столбца был установлен на ноль. Затем вы обновляете его, используя v-for="colorIndex in maxColumn" (который начинается с 1), затем {{ colNumber = colorIndex - 1 }}, который снова устанавливает значение colNumber обратно в ноль. Вот почему вы получили две красные колонки. Это просто не нужно. В идеале вам следует избегать изменения состояния внутри вашего шаблона представления, чтобы не столкнуться с этими проблемами несогласованности. 

new Vue({
  el: '#app',
  data: {
    tableRows: ['Table Row 1'],
    counter: 1,
    bgColor: ['green', 'red', 'blue', 'yellow',],
    fontSize: '30',
    colNumber: 0,
    maxColumn: 5,
  },

  methods: {
    getBgColor: function(colorIndex) {
      return this.bgColor[colorIndex % this.bgColor.length];
    }
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <table border="1" width="500px" height="300px">
    <tr v-for="(content, index) in tableRows">
      <td v-for="colorIndex in maxColumn" 
		:style="{ backgroundColor: getBgColor(colorIndex) }">
		getBgColor : {{ getBgColor(colorIndex) }} <br> <br> 
		row count {{ counter }} <br> 
		column count {{ colNumber = colorIndex - 1 }}
	  </td>
    </tr>
  </table>
</div>
...