Question

我有一个带webpack和VueJS的Ruby on Rails 5.2应用程序，我有Bootstrap模态表单设置。我想在vue-boostrap中使用此form file input component，因为它可以轻松显示文件名。

当将表单加载到页面上时，此组件可以正常工作，但是当将其放在模式中时，则不会加载该组件。

我怀疑这与Vue在每个页面上查找元素的方式有关，但是我对它的运作方式了解不足。

<!-- _modal-form.html.erb -->
<%= bootstrap_form_with(model: @out_item, remote: true, multipart: true) do |f| %>
  <div class="modal-body">
    <%= f.alert_message "Please review the problems below:" %>
    <%= f.text_field :destination %>
    <%= f.text_area :description, rows: 3 %>
    <%= f.date_select :date %>
    <label for="out_item_images">Images:</label>
    <b-form-file placeholder="Add Images..." multiple name="out_item[images][]"></b-form-file>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
    <%= f.submit "Create Parcel", class: "btn btn-primary" %>
  </div>
<% end %>

在索引页面上有此按钮代码

<!-- index.html.erb -->
<%= link_to fa_icon("plus", text: 'New Parcel'), new_out_item_path, remote: true, :class => 'btn btn-primary' %>
<div class="modal fade" id="out-item-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

哪个会调用新的控制器操作并将以下JS传递给浏览器

// new.js.erb
$("#out-item-modal").html("<%= escape_javascript(render 'new') %>")
$("#out-item-modal").modal("show")

哪个会渲染新的部分

<!-- _new.html.erb -->
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
    <h4 class="modal-title">New Parcel</h4>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
    <%= render 'modal-form' %>
</div>

我不确定这是否相关，但我也根据GoRails screencast

使用Vue

// application.js
import TurbolinksAdapter from 'vue-turbolinks';
import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'
import BootstrapVue from 'bootstrap-vue'
import VueChartkick from 'vue-chartkick'
import Chart from 'chart.js'

Vue.use(BootstrapVue);
Vue.use(TurbolinksAdapter)
Vue.use(VueChartkick, {adapter: Chart})

document.addEventListener('turbolinks:load', () => {
  const app = new Vue({
    el: '[data-behaviour="vue"]',
  })
})

带有VueJS组件的Ruby on Rails在引导模态中不起作用

0 个答案: