erb link_to 标签中的 Vue.js 数据

Question

我正在开发一个 Rails 应用程序，其中一个页面使用 vue.js 加载谷歌地图，使用 axios 进行少量 api 调用并使用 vue.js 捕获一些用户值。 我想将这些值作为“link_to”erb 标签中的参数提交。 请参阅下面的代码片段

下面是我的 vue 实例硬编码数据。

 let vm = new Vue({
  el: '#vue-map',
  data: {
    selectedProductId: 46,
    latt: '-26.29217',
    long: '28.070820000000026'
   }

下面是来自实际 index.html.erb 文件的片段。

<div class='panel-footer'>
    <%= link_to 'Continue',maps_path(:product => {{selectedProductId}}) ,class: "btn btn-success"%>
</div>

我收到以下错误“语法错误，意外的 '}'”。

我试过带引号和不带引号。 没有引号，我会得到语法错误，并且有引号，它确实通过了，但在我的 rails 控制器中，参数是一个字符串，而不是 vue 数据中的值。

任何帮助将不胜感激 ：）

Answer 1

我使用“v-bind”找到了解决问题的方法。 我使用了一个普通的锚标签而不是 rails“link_to”。

下面是 index.html.erb 的片段

  <div class='panel-footer'>
    <a v-bind:href="'/maps/customer_detail?product=' + selectedProductId" class='btn btn-success'>Continue</a>
  </div>

希望这可以帮助任何在 rails html.erb 文件中使用 Vue.js 的人