Question

尽我所能，现在就把我的头围在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中植入任何值开始的，什么是最好的方法？

在Vue.js中创建动态列表

0 个答案: