使用带有 VueJS2 的 Rails 5.1 API

Posted 2023-02-22

【中文标题】使用带有 VueJS2 的 Rails 5.1 API

【英文标题】：Use Rails 5.1 API with VueJS2

【发布时间】：2018-06-05 07:30:36

【问题描述】：

我有一个现有的 Rails 应用程序，它有一个呈现为 json 的资源。我用Postman检查了json，一切正常。

我已经使用 webpacker gem 安装了 vuejs：

gem 'webpacker', '~> 3.0'

然后：

bundle exec rails webpacker:install

接着是：

bundle exec rails webpacker:install:vue

然后我的应用中有相关的新文件。

但是我没有得到要在索引页面中呈现的数据。

index.html.rb

#other code removed
<div id="roastslist">

  <table>
    <thead>
      <tr>
        <th>Roast Name</th>
        <th>Roaster</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="roast in roasts">
        <td>roast.name</td>
        <td>roast.roaster</td>
      </tr>
    </tbody>
  </table>
</div>
#other code removed

assets/javascripts/roasts.js

var v = new Vue(
  el: '#roastslist',
  data: 
    roasts: []
  ,
  mounted: function()
    $.get('/roasts.json', function(data)
      v.roasts = data;
    )
)

【问题讨论】：

你的控制器方法是如何传递给 Vue 的？

抱歉，不能 100% 确定您的意思。对此非常陌生。我唯一添加的是format.json render index: @roasts

【参考方案1】：

这真的很简单，但遗憾的是没有记录：

摆脱 webpacker（不必要的头痛，见下文） 使用 vue from the cdn。它已缓存，您无法使用它。 将您的 js 代码移动到模板中 将数据呈现到模板中 5（可选）当（且仅当）它发生变化时，从 json 端点更新数据

为了演示，这将是您模板中的代码（我使用 haml，它有一个 :javascript 过滤器）

:javascript
   var v = new Vue(
       el: '#roastslist',
     data: 
       roasts: "#@rosts.to_json"
     

to_json 渲染烤肉（以 json 格式），从而使它们可用于 Vue。 to_json 有很多选项（比如 :only），但如果这还不够，我会使用 rabl。

如果（以及何时）您的 js 代码过多，您可以将一些代码移到不同的文件中，或者（函数）移到资产管道中。

PS：我使用ruby2js，这将代码大小减少了大约一半（同时看起来很容易） 另外，请观看my blog,，我将在此主题上写更多内容。

【参考方案2】：

不要使用 Vue 的挂载，尝试 JSON.parse 作为您的数据，如下所示：

 var element = document.getElementById('roastslist')
  if (element != null) 
    const v = new Vue(
      el: element,
      data: 
        roastslist: JSON.parse(element.dataset.rosts)
      ,
      template: "<roast-list :original_roasts='roastslist' />"
    )
  
)

然后，在你的roasts.js 中使用：

 <tr v-for="roast in original_roasts">
    <td>roast.name</td>
    <td>roast.roaster</td>
  </tr>

我将烤肉更改为 original_roasts 以表示传递的 json 对象。此外，original_roasts 可以作为 prop 数组在其他组件中使用相同的 json 数据传递。