Vue - 对象的新实例作为另一个未嵌套的新对象的属性

Question

我正在使用带有 Vue.js 2 的 Rails 5.2，并且我有以下对象关系...

• 菜单
  • 主菜
    • 主菜选项
  • 甜点
    • 甜点选择
  • 饮料
    • 饮料选项（属性：food_item）//主菜或甜点 ID

菜单有_许多主菜、甜点、饮料
主菜有很多主菜选项
甜点有_很多甜点_选项

我有一个用于菜单的嵌套表单。

可以为任何内置的主菜或甜点（多态）设置饮料选项。我需要一种方法来获取已构建的主菜和甜点，并将选择的主菜与饮料选项对象相关联。

我可以将整个 food_item 对象存储在 Vue 数据中并根据需要显示相关的选项，但我不知道如何使用 v-model 将 food_item 与 Drink_option 对象相关联，因为它们尚未持久化并且Drink_options 不直接嵌套在 food_items 下。

这就是我现在所拥有的，它只会在保存表单后导致 food_item_id 的值为“nil”。如果这不可能，是否有建议的方法在 Vue 中处理这种情况？

        <div class="card mb-3">
          <h6 class="card-header">Beverages</h6>
          <div v-for="(beverage, index) in menu.beverages_attributes" :key="beverage.id">
            <div class="card-body">
              <div class="card-text">
                <div class="form-group">
                  <label>Name</label>
                  <input type="text" v-model="beverage.name" class="form-control form-control-sm" />
                </div>
                <div class="form-group">
                  <select class="custom-select" v-model="beverage.food_item_id">
                    <option>Choose One</option>
                    <option v-bind:value="food_item.id" v-for="food_item in menu.food_items" :key="food_item.id">
                      {{ food_item.name }}
                    </option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>

Answer 1

嗯，是的，ID 将来自您的数据库。将它们保存在临时变量中并将其发送到 api 或生成随机 id 然后保存。

当api返回带有真实ID的响应更新时。