Rails 使用 JSON 将深度嵌套属性到 Vue 实例

Posted 2023-02-22

【中文标题】Rails 使用 JSON 将深度嵌套属性到 Vue 实例

【英文标题】：Rails Deep Nested Attributes to Vue Instance with JSON

【发布时间】：2018-11-16 19:08:18

【问题描述】：

我有一个带有嵌套表单属性的 Rails 应用程序，并且我正在使用 Vue.js。我的第一级嵌套对于创建和编辑工作正常，但是对于更深层次的嵌套属性，我该如何解决 Rails 需要将“_attributes”附加到关联属性来处理更新的问题？

如何访问更深层的嵌套属性（在我的例子中是“minimum_premia”）并将它们传递给带有“_attributes”后缀的 Vue 实例，以便提交通过？

//_form.html.erb

<%= content_tag :div,
data: 
  id: product.id,
  product: product.to_json(except: [:id, :created_at, :updated_at]),
  coverages_attributes: product.coverages.to_json(:except => 
  [:product_id, :created_at, :updated_at], :include => [:minimum_premia 
  => :except => [:coverage_id, :created_at, :updated_at]])
 do %>

...

<div v-for="(minimum_premium, index) in coverage.minimum_premia_attributes">
  <label>Amount</label>
    <input type="number" v-model="minimum_premium.amount">
</div>


//vue.js

var id = element.dataset.id
var product = JSON.parse(element.dataset.product)
    var coverages_attributes = JSON.parse(element.dataset.coveragesAttributes)
    coverages_attributes.forEach(function(coverage) coverage._destroy = null)
    product.coverages_attributes = coverages_attributes

var app = new Vue(
  el: element,
  data: function() 
      return  id: id, product: product 
  ,
  methods: 
    addCoverage: function() 
      this.product.coverages_attributes.push(
        id: null,
        name: "", 
        _destroy: null,
        minimum_premia_attributes: [
          id: null,
          amount: null
        ]
      )
     

【参考方案1】：

使用 Jbuilder 解决了这个问题，使用必要的附加名称生成 JSON 对象。

例如：

json.product do
  json.coverages_attributes product.coverages do |coverage|
    json.minimum_premium_rules_attributes coverage.minimum_premium_rules do |minimum_premium_rule|
      json.(minimum_premium_rule, :minimum_premium)
    end
  end
end

从数据库中检索到的 coverage.minimum_premium_rules 使用正确的嵌套属性命名传递到 vue - minimum_premium_rules_attributes - Rails 需要更新记录。