Доступ к элементу объекта Vue js?

Question

[Tereverda]

Есть массив в data, на скриншоте вывод его в консоли.
Не получается перебрать
{%%} - это шаблон вывода место стандартного {{ }}
В консоли доступ есть console.log(this.boxes[0].height);
Проблема в синтаксисе {% box.height %}

<ul>
      <li v-for="box in boxes">
        {% box.height %}
      </li>
    </ul>

Answer 1

[Aetae]

Всё работает, проблема где-то в другом месте:

Comments

[Tereverda]

var app = new Vue({
    el: '#app',
    delimiters: ['{%', '%}'],
    data: {
      // Служебные переменные
        errors: [],       // массив с ошибками
        alert: '',        // обложка текста с ошибками
        error_length: '', // подсвечивание инпута длина
        boxes: [],        // массив с коробками

      // Данные из формы
        length: '',
        width: '',
        height: '',
        range: '30',
    },
    mounted() {
      axios.get('/api/get_boxes')
        .then(function(response) {
          this.boxes = response.data;
          console.log(this.boxes);
        })
        .catch(function(error) {
          console.log(error);
        });
  },
  watch: {
    width: function () {
      if(this.length < this.width) {
        this.errors = []; // убираем предыдущие сообщения об ошибках
        this.errors.push('Ширина должна быть меньше длины, поменяйте местами');
        this.error_length = true;
      } else {
        this.errors = [];
        this.error_length = false;
      }

    // Обложка текста
      if(this.errors.length == 0) { this.alert = false; }
      else { this.alert = true; }
    },
  }
});

Ссылка на страницу https://app.ronbel.ru/poisk_korobok

[Tereverda]

Aetae, добавил кнопку "поиск", похоже что после mounted, значение boxes обнуляется.
Из-за этого ничего не выходит, как этого избежать?

[Aetae]

Tereverda, открыл страницу - вроде работает)