Question

我有一个促销代码网格，其中有一个选项可以编辑促销代码的值。选择编辑会打开一个模态，并使用db中的促销代码值填充模态。

我在编辑按钮上调用了这个函数：

'v-on:click.prevent': 'showEditPromoCodeModal("#edit_promo_code_<%= promo_code.id %>")'

每个模态都在后台准备，以相关ID打开：

<% @promo_codes.each do |promo_code| %>
  <div id="edit_promo_code_<%= promo_code.id %>" class="ui small modal">
    <%= render "admin/promo_codes/edit", promo_code: promo_code %>
  </div>
<% end %>

该函数打开其中一个模态，通过id选择相应的模态：

showEditPromoCodeModal: function(modal_id) {
  $(modal_id).modal({
    observeChanges: true,
    onApprove : function() {
      $(modal_id + " .positive.button").addClass("loading");
      $(modal_id + " form").submit();
      return false;
    },
  }).modal('show');
},

如果我硬编码，这是有效的：

showEditPromoCodeModal("#edit_promo_code_1")

我想知道是否可以这样使用ruby标签：

showEditPromoCodeModal("#edit_promo_code_<%= promo_code.id %>")

看起来在javascript函数调用中可以识别ruby标记语法中的问题，但在纯HTML中很好。我得到错误“语法错误，意外的tIDENTIFIER，期待keyword_end”几行之后。如果这是不可能的，我假设我必须在外面准备id字符串并将其插入那里。

编辑：

用我需要调用模态的html替换了我的link_to方法。

我修改了通过网格调用的方式：

g.column name: "Edit Code", attribute: 'id' do |promo_code|
  "<span v-on:click='showEditPromoCodeModal(#edit_promo_code_#{promo_code.id})' class='ui green label'>Edit</span".html_safe
end

该方法实际上已正确加载但导致另一个错误：

https://i.gyazo.com/4827b7f8de80a4b306003f5911703b96.png

问题似乎是在wice网格中调用vue-js。当我硬编码时（在link_to方法中）我在wice-js中调用vue-js没有问题：

showEditPromoCodeModal("#edit_promo_code_1")

当只在wice网格中使用html时，vue-js突然是一个无效的表达式，但是ruby标签可以工作。有没有办法让两者都有效或这是一个根本问题？我使用调用v-on的javascript网格实现了相同的功能：click =“method（＃updateX_＆lt;％= X.id％＆gt;以打开方法。

javascript函数调用中的Ruby标记

0 个答案: