Создание динамического списка в Vue.js - PullRequest
0 голосов
/ 11 мая 2019

Стараюсь изо всех сил, чтобы обернуть мою голову вокруг 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 Как лучше всего подойти к этому?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...