Как передать данные в модальное окно?

Question

[Денис Букреев]

Есть data:

{
  items: [
    {
      id: 1,
      name: 'Lawnmower',
      fields: [
        {
          name: 'Horsepower',
          type: 'number',
          value: '717',
          default: '0'
        }
      ]
    }
  ]
}

Это кусочек возвращаемого объекта, таких items много, как и fields у каждого из items.

Items выводятся в таблице со значениями id и name через v-for="item in items"
При клике по строке таблицы (v-on:click="editItem(item)") срабатывает функция, которая принимает текущий item. Функция открывает модальное окно, где должны выводится item.name и item.fields.

Так вот, как мне с помощью этой функции возвратить item.name и item.fields в модальное окно?

Я уже голову сломал об придумывание кода, в доках все только на примерах, которые на реальный проект вообще не похожи и поэтому накладывать на реальные ситуации эти доки не получается.

Comments

[lega]

В чем проблема передать сам item? как вы модальное окно вызываете?

[Денис Букреев]

у нее просто меняется display, вызываю через эту же функцию.
Я передаю в переменные внутри функции, но template эти переменные в упор не видит

Answer 1

[D']

1) Сделать модалку компонентом и передавать item через props.
2) Сделать переменную selectedItem, и в editItem устанавливать ее, а в модалке использовать.

Выбирай.

Comments

[Денис Букреев]

интересно, можно немного подробнее про первый метод? или тыкнуть меня лицом туда куда надо

[D']

Денис Букреев: vuejs.org/guide/components.html вот тут почитать

[Денис Букреев]

D' Normalization: что-то непонятно как передавать переменную из компонента в компонент

насчет второго метода: создаю переменную, пихаю в нее полученный item, возвращаю
но как ее использовать дальше? template ее не видит

[D']

Денис Букреев: передавать просто:
<my-component :item="item"></my-component>
В MyComponent прописываем:

props: {
item: {required: true}
}

И используем.
VueJS простой как две копейки, я не знаю с чем там могут возникнуть сложности.

[Денис Букреев]

D' Normalization: вот так функция выглядит
editItem: function(item) {
this.setItem = item;
$('.modal.item-type-edit').modal('show');
return this.setItem;
}
как теперь загонять в темплейт?

[Денис Букреев]

D' Normalization: попробую
я вообще фреймворков не знаю, читал доки ангуляра первого и все

[D']

Денис Букреев: что значит "как теперь загонять в темплейт"? В шаблоне просто прописываем:

<div class="modal">
  <div v-if="setItem">
    {{ setItem.name }}
    {{ setItem.blablabla }}
  </div>
</div>

[Денис Букреев]

D' Normalization: Vue просто выкидывает этот блок, будто переменной нет.
с var тоже создавал переменную - нулина

[Денис Букреев]

D' Normalization: все, просто забыл вернуть модалки в общий темплейт)
спасибо огромное

Answer 2

[Евгений Перин]

Создай еще переменные model_name и modal_fields с пустыми значениями. При клике приравнивай их к значениям item.name и fields соответственно. При закрытии модалки снова очистить их

Comments

[Денис Букреев]

а где создать переменные?
внутри функции если, то template их не видит, даже с return