Как прикрепить <% =%> и форму входа (разработка) в vue компонентах

Question

У меня есть компонент 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 %>

, но он не работает, отображается кактекст.Как интегрировать rails heplers или форму входа в vue компоненты ???

Answer 1

Вы не можете.

Если вы хотите передать свои данные в компонент 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, вы можете использовать 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>`
})