时间戳

首页 > 解决方案 > 如何在 vue 组件中附加 <%= %> 和登录表单（设计）

ruby-on-rails - 如何在 vue 组件中附加 <%= %> 和登录表单（设计）

问题描述

我有Vue组件

Vue.component('my-modal', {
template: '<div class="modal-open "> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="close material-icons" data-dismiss="modal" aria-label="Close" @click="$emit(\'close\')" ><a class="material-icons" style="color: black">cancel</a></button></div> <div class="modal-body"> <p><%= User.find(1).name %></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Save changes</button> <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="$emit(\'close\')">Close</button> </div> </div> </div> </div>'
})

document.addEventListener('DOMContentLoaded', () => {
new Vue({
    el: '#root',
    data: {
        showLoginModal: false
    },
});
});

它是模态窗口。我想在模态窗口中呈现登录表单，但它在 vue 组件中

在组件中，我使用（例如） 

<%= User.find(1).name %>

但它不起作用，显示为文本。如何在 vue 组件中集成 rails heplers 或登录表单？？？

标签： ruby-on-railsvue.js

解决方案

你不能。

如果要将数据传递给 vue 组件，可以使用props：

# rails view
<my-modal name="<%= User.find(1).name %>"></my-modal>


# vue component
Vue.component('my-modal', {
  template: `<div class="modal-open ">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-body">
          <p>{{ name }}</p>
        </div>
      </div>
    </div>
  </div>`,
  props: ['name']
})

如果你想在 vue 组件中显示 rails 表单，你可以使用slot：

# rails view
<my-modal>
  <%= form_for @whatever do |f| %>
    ...
  <% end %>
</my-modal>


# vue component
Vue.component('my-modal', {
  template: `<div class="modal-open ">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-body">
          <slot />
        </div>
      </div>
    </div>
  </div>`
})

推荐阅读