Rails + Ajax에서 Vue.js 바인딩 사용
하고 싶었던 일
참고 사이트
선언적 렌더링 - Vue.js
준비
sample/index 페이지를 준비한다.
$ rails g controller sample index
구현
Config
sample/index 페이지에서 POST도 받을 수 있도록 라우팅을 추가합니다.
config/routes.rb get 'sample/index'
post 'sample/index' # 追記
컨트롤러
요청이 POST이면 인스턴스 변수 @now가 현재 시간을 저장하게합니다.
app/controllers/sample_controller.rbclass SampleController < ApplicationController
def index
if request.request_method == 'POST'
require "date"
@now = Time.now.strftime("%H時 %M分 %S秒")
end
end
end
보기
Vue.js 바인딩을 사용하여 JavaScript에서 변수 app.message에 값이 할당되면 화면의 텍스트 ( id=app 내의 {{message}} )가 업데이트됩니다.
app/views/sample/index.js.erb<!-- HTML -->
<div id="app">
<p>{{ message }}</p>
</div>
<%= button_to "時刻を更新" , sample_index_path ,remote: true %>
<!-- JavaScript -->
<script src="https://unpkg.com/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: '初期値'
}
})
</script>
app/views/sample/index.js.erbapp.message = "いまは <%= @now %>です。";
동작
버튼을 클릭하면 변수 app.message 에 텍스트가 대입되어 화면상의 텍스트가 갱신된다.
sample/index 페이지를 준비한다.$ rails g controller sample index
구현
Config
sample/index 페이지에서 POST도 받을 수 있도록 라우팅을 추가합니다.
config/routes.rb get 'sample/index'
post 'sample/index' # 追記
컨트롤러
요청이 POST이면 인스턴스 변수 @now가 현재 시간을 저장하게합니다.
app/controllers/sample_controller.rbclass SampleController < ApplicationController
def index
if request.request_method == 'POST'
require "date"
@now = Time.now.strftime("%H時 %M分 %S秒")
end
end
end
보기
Vue.js 바인딩을 사용하여 JavaScript에서 변수 app.message에 값이 할당되면 화면의 텍스트 ( id=app 내의 {{message}} )가 업데이트됩니다.
app/views/sample/index.js.erb<!-- HTML -->
<div id="app">
<p>{{ message }}</p>
</div>
<%= button_to "時刻を更新" , sample_index_path ,remote: true %>
<!-- JavaScript -->
<script src="https://unpkg.com/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: '初期値'
}
})
</script>
app/views/sample/index.js.erbapp.message = "いまは <%= @now %>です。";
동작
버튼을 클릭하면 변수 app.message 에 텍스트가 대입되어 화면상의 텍스트가 갱신된다.
get 'sample/index'
post 'sample/index' # 追記
class SampleController < ApplicationController
def index
if request.request_method == 'POST'
require "date"
@now = Time.now.strftime("%H時 %M分 %S秒")
end
end
end
<!-- HTML -->
<div id="app">
<p>{{ message }}</p>
</div>
<%= button_to "時刻を更新" , sample_index_path ,remote: true %>
<!-- JavaScript -->
<script src="https://unpkg.com/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: '初期値'
}
})
</script>
app.message = "いまは <%= @now %>です。";
버튼을 클릭하면 변수
app.message 에 텍스트가 대입되어 화면상의 텍스트가 갱신된다.Reference
이 문제에 관하여(Rails + Ajax에서 Vue.js 바인딩 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/NaokiIshimura/items/c7c1330743757925e385텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
