Как передать индекс в компонент?

Question

[pavelkunyavskiy]

У меня есть массив с объектами

content: [
        {
          text: '',
          image: '',
          caption: ''
        }
      ]

Разметка

<div v-for="item in content">
      <medium-editor :text="item.text" :options="options" custom-tag="div" v-on:edit="editText"></medium-editor>
      <input type="text" v-model="item.image">
      <input type="text" v-model="item.caption">
    </div>

Также у меня есть кнопка которая добавляет эти элементы в дом

<button @click="addBlock">add</button>

addBlock () {
      this.content.push({
        text: '',
        image: '',
        caption: ''
      })
    }

Пробелма в том что это не работает с medium-editor. С input работает, но с этим компонентом не работает.

Дело вот в чем

editText (operation) {
      this.content[i].text = operation.api.origElements.innerHTML
    }

Как мне сюда передать индекс чтобы компонент понимал какие данные он редактирует?

Answer 1

[0xD34F]

Индекс не нужен, передавайте сразу элемент массива:

v-on:edit="editText($event, item)"

Сам editText будет при этом выглядеть следующим образом:

editText(operation, item) {
  item.text = operation.api.origElements.innerHTML;
},

Comments

[pavelkunyavskiy]

Работает! Но немного непонятна магия... Пожалуйста можно ссылку на доку или пару слов? Как вы узнали что item можно передать (я пробовал передать index, не получилось, сразу начала ругатся консоль).

Огромное спасибо!!!!

[0xD34F]

pavelkunyavskiy, как узнал? Гм-гм, даже не знаю что и сказать... чем передача элемента массива принципиально отличается от передачи индекса? Ничем, только кода чуть меньше.