Стараюсь изо всех сил, чтобы обернуть мою голову вокруг Rails и Vue.js прямо сейчас.Допустим, у меня есть список элементов, который динамически заполняется из моей базы данных.Я могу даже сделать несколько разных списков, поэтому я называю их как показано ниже, однако имейте в виду, что элементы в этих списках могут сильно различаться в зависимости от пользователя:
<%= render 'items/item_list', items: @items_foo %>
<%= render 'items/item_list', items: @items_bar %>
Допустим, каждый элемент состоит из двухразные размеры, маленькие и большие, и что каждый предмет будет иметь разную цену в зависимости от того, какой из них выберет пользователь.Я хотел бы иметь вкладки, по которым пользователь может щелкнуть, а затем цена изменится на этот элемент.Это может выглядеть примерно так:
<ol>
<% items.each do |item| %>
<li>
<table class="tabs-container"><tr>
<% if item.is_available_in_large? %>
<td class="tab" @click="changeItemPrice('<%= item.small-price %>')">
<h3>Small</h3></td>
<% end %>
<% if coffee.is_available_in_large? %>
<td class="rd19-size-tab" @click="changeItemPrice('<%= item.large-price %>')"><h3>large</h3></td>
<% end %>
</tr></table>
<!-- Price -->
<h1>
{{ itemPrice }}
</h1>
Это явно не работает.Я мог бы использовать vue.js, чтобы сделать что-то вроде этого:
data: {
itemPrice: ''
},
methods: {
changeItemPrice(price) {
this.itemPrice = price
}
}
Однако проблема здесь в том, что каждый элемент в списке приобретает новую цену.Я видел, как я мог бы сделать itemPrice массивом и получить его через индекс, но во всех примерах, которые я видел, этот массив жестко закодирован в код Vue.js.
Мне нужно генерировать списки динамически и действительно иметьне знаю, насколько большими или какими элементами будут эти списки, потому что он будет отличаться для каждого пользователя.Кроме того, я не начинаю с каких-либо значений, добавленных в itemPrice
Как лучше всего подойти к этому?