Vue js изменить свойство объекта в цикле

122
11 апреля 2021, 05:10

Есть кусок шаблона:

<div class="element" v-for="(element, index) in formElements" :key="index">
  <div class="element-content">
    <div class="number">
      {{ element.priority = index + 1 }}.
    </div>
    <select v-model="element.selected" required>
      <option value="" disabled hidden selected>
        Choose a option
      </option>
      <option v-for="(label, optionIndex) in formData" :key="optionIndex" :value="label.name" :disabled="matchSelected(label.name)">
        {{ label.title }}
      </option>
    </select>
    <button type="button" class="button button--sort" @click="element.sort = changeSort(element.sort)">
      <img :src="element.sort === 'ASC' ? getImgUrl('sort-ASC.svg') : getImgUrl('sort-DESC.svg')" alt="">
    </button>
  </div>
  <button type="button" class="button button--delete" @click="deleteLabel(index)">
    <img src="../assets/clear.svg" alt="">
  </button>
</div>

Мне нужно привязатьelement.priority и index, что я и делаю в интерполяции, но думаю, что это bad practice.

Как лучше в таком случае сделать реактивную привязку?

Answer 1
computed: {
  computedFormElements() {
    return this.formElements.map( (_, index) => ({
      ..._,
      priority: index + 1,
    }))
  }
}

И уже в цикле использовать измененный массив, в нем priority будет в нужном виде.

<div class="element" v-for="(element, index) in computedFormElements" :key="index">
READ ALSO
Получить данные со страницы в виде json
javascript

Получить данные со страницы в виде json

Есть страница в которой просто написано в виде json, мне нужно как-то получать каждое из этих чтобы я мог с этим работатькак это реализовать?

 105
Почему сперва выводится 1, а потом &ldquo;Hello&rdquo;?
javascript

Почему сперва выводится 1, а потом “Hello”?

 119
Приходит пустой post запрос ajax+django
javascript

Приходит пустой post запрос ajax+django

После нажатия на кнопку отправляется post запрос:

 101
Подключить font IcoMoon во Vue.js
CSS

Подключить font IcoMoon во Vue.js

При попытке подключить шрифт-иконки chrome выдает следующее:

 131