我正在創建一個 Rails 專案，但遇到了幾個問題。
到目前為止我所做的
application.html.erb首先，我使用布局檔案中的 cdn 鏈接將引導程式添加到專案中。這給了我所需的格式并且作業得很好但是，由于渦輪鏈接，下拉導航所需的 javascript 在頁面更改時停止作業。
為了解決這個問題，我使用了 Webpacker 并按照這里的教程https://www.bootrails.com/blog/rails-bootstrap-tutorial/來獲取引導程式和所需的 javascript 所需的按預期作業。
我現在面臨的問題
現在我已經在引導程式中添加了一些用于銷毀記錄的接收器不再起作用。
下面的代碼不再像以前那樣顯示彈出視窗并銷毀記錄，而是將我帶到記錄并顯示它。
<%= link_to 'Destroy', emergency_contact, method: :delete, data: { confirm: 'Are you sure?' } %>
控制臺日志
當我單擊上面的鏈接時，rails 服務器控制臺中會輸出以下內容。
Started GET "/emergency_contacts/1" for 127.0.0.1 at 2022-06-15 11:01:48 0100
Processing by EmergencyContactsController#show as HTML
Parameters: {"id"=>"1"}
EmergencyContact Load (0.1ms) SELECT "emergency_contacts".* FROM "emergency_contacts" WHERE "emergency_contacts"."id" = ? LIMIT ? [["id", 1], ["LIMIT", 1]]
? app/controllers/emergency_contacts_controller.rb:63:in `set_emergency_contact'
Rendering layout layouts/application.html.erb
Rendering emergency_contacts/show.html.erb within layouts/application
Rendered emergency_contacts/show.html.erb within layouts/application (Duration: 0.3ms | Allocations: 128)
[Webpacker] Everything's up-to-date. Nothing to do
User Load (0.1ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."id" ASC LIMIT ? [["id", 1], ["LIMIT", 1]]
? app/views/layouts/application.html.erb:45
Rendered layout layouts/application.html.erb (Duration: 7.6ms | Allocations: 3648)
Completed 200 OK in 10ms (Views: 7.9ms | ActiveRecord: 0.3ms | Allocations: 4591)
代碼位
我已經包含了一些我認為與我面臨的問題相關的代碼
配置/webpacker.yml
改為source_path: app/javascript_source_path: app/frontend
應用程式/前端/包/application.scss
內容：
@import "~bootstrap/scss/bootstrap";
應用程式/前端/包/application.js
內容：
import '../js/bootstrap_js_files.js'
應用程式/前端/js/bootstrap_js_files.js
內容：
// import 'bootstrap/js/src/alert'
// import 'bootstrap/js/src/button'
// import 'bootstrap/js/src/carousel'
import 'bootstrap/js/src/collapse'
import 'bootstrap/js/src/dropdown'
// import 'bootstrap/js/src/modal'
// import 'bootstrap/js/src/popover'
import 'bootstrap/js/src/scrollspy'
// import 'bootstrap/js/src/tab'
// import 'bootstrap/js/src/toast'
// import 'bootstrap/js/src/tooltip'
應用程式/視圖/布局/application.html.erb
頭：
<head>
<title>MyApp</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<!-- Warning !! ensure that "stylesheet_pack_tag" is used, line below -->
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
落下：
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
dd links
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">dd link 1</a></li>
<li><a class="dropdown-item" href="#">dd link 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">dd link 3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">dd link 4</a></li>
</ul>
</li>
uj5u.com熱心網友回復：
替換link_to為button_to
<%= link_to 'Destroy', emergency_contact, method: :delete, data: { confirm: 'Are you sure?' } %>
至：
<%= button_to 'Destroy', emergency_contact, method: :delete, data: { confirm: 'Are you sure?' } %>
如果confirm仍然無法正常作業，您可以添加onclick選項
<%= button_to 'Destroy', emergency_contact, method: :delete, onclick: "return confirm('Are you
sure?')" %>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/491306.html
標籤：javascript 轨道上的红宝石 引导程序 5 打包程序
上一篇：更改vue組件中的資料值