Question

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

菜单
- 主菜
  - 进入选项
- 甜点
  - 甜点选项
- 饮料
  - 饮料选项（属性：food_item）//主菜或甜点ID

菜单上有很多主菜，甜点，饮料
进入has_many entree_options
甜点has_many dessert_options

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

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

我可以将整个food_item对象存储在Vue数据中，并根据需要显示相关的选项，但是我无法弄清楚如何使用v-model将food_item与Drinker_option对象相关联，因为它们尚未持久化并且饮料选项不会直接嵌套在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将来自您的数据库。将它们保存在temp变量中，然后将其发送到api或生成随机ID，然后保存。

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

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

1 个答案: