Rails Vuejs Webpacker: 인스턴스 변수 데이터 전달

Rails Vuejs Webpacker: 인스턴스 변수 데이터 전달

Webpacker gem을 통해 생성된 Rails 5.1 with Vuejs 앱을 만드는 방법을 배우려고 합니다.

$ rails new myvueapp --webpack=vue

데이터를 데이터베이스로 송수신하기 위해 인스턴스 변수 데이터를 Vue 컴포넌트 간에 역방향으로 전달하려면 어떻게 해야 합니까?

예를 들어 사용자 이름과 이메일 필드가 있는 사용자 모델이 있다고 가정합니다.컨트롤러에서 컴포넌트로 인스턴스 변수 @user 데이터를 전달하는 간단한 예가 있습니까?

여기에는 두 가지 방법이 있다고 생각합니다.

(1) 컨트롤러는 다음을 가진다.render :json => @user그런 다음 fetch API 또는 Axios를 사용하여 .vue 컴포넌트의 데이터를 가져옵니다.

-혹은...

(2) 예시와 같은 것을 사용한다.<%= javascript_pack_tag 'hello_vue' %>와 함께<%= content_tag ... %>시야에

이렇게 하면<%= javascript_pack_tag 'hello_vue' %>예를 들어 컴포넌트 "message" 변수의 데이터에서 "Hello Vue!"를 볼 수 있지만 Rails에서 전달되고 있는 @user data 등의 인스턴스 변수 데이터의 예를 찾을 수 없습니다.

@user data를 건네주는 예를 들어주시면 감사하겠습니다.

감사합니다.

효과가 있는 작업을 했지만 별로 마음에 들지 않습니다.window범위:

// app/javascript/packs/some_app.js

window.someAppPack = function (var1, var2) {
  // ...
  new Vue({
    // ...
    data () {
      return {
        var1,
        var2,
      }
    }
    // ...
  })
}

레일 템플릿에서 다음을 수행합니다.

<%= javascript_pack_tag 'somePack' %>

<script>
  someAppPack(#{raw @var1.to_json}, #{raw @var2.to_json})
</script>

이것은 나에게 더럽게 느껴지는데, 나는 그 장점이 궁금하다.

• Vue 앱은 사후 대응적이어야 하므로 데이터가 나중에 업데이트될 수 있으며 JSON 리소스에 대한 호출이 이루어집니다.원래 데이터를 넘겨주는 건 무의미해
• Vue는 페이지의 일부를 무효로 하기 위해서만 사용되는 경우 표준 레일 파이프라인에서 "인라인" Vue를 사용할 수 있는데 왜 모든 웹 팩을 사용합니까?

당신이 달성하려는 것이 무엇인지 100% 확신할 수는 없지만 두 가지 방법을 생각할 수 있습니다.

1. 사용하다v-model폼으로검색되거나 업데이트된 값은 Vue 인스턴스에서 즉시 사용할 수 있습니다.(예:<%= f.input :username, input_html: { 'v-model': 'username' } %>

2. 데이터 속성을 사용합니다.예를 들어, 컨트롤러가 있는 경우,@user변수.

그런 다음 다음과 같은 작업을 수행할 수 있습니다(메모리만으로 100% 정확하지는 않을 수 있습니다).

<% simple_form_for @user do |f| %>
  <%= f.input :username, input_html: { id: 'user_username', data: { username: @user.username } } %>
  <%= f.input :email, input_html: { id: 'user_email', data: { email: @user.email } } %>
<% end %>

그런 다음 JavaScript를 사용하여 데이터 속성에 액세스할 수 있습니다.이러한 예에서는 둘 다 형식이므로 다음을 사용하는 것이 좋습니다.v-model단, 데이터 속성을 비양식적인 것에 사용할 수 있습니다.예를 들어 AJAX 요청에 사용되는 URI의 데이터 속성을 테스트 사이트마다 다를 수 있습니다.

저도 같은 문제를 겪었던 것 같아요. 하지만 소품 덕분에 도움이 됐어요.

app/filename/**/*.filename.erb

<div id="app" data-initial-value="#{raw(html_escape(@var.to_json))}"></div>
<%= javascript_pack_tag 'app' %>

app/script/pack/app.ts

import Vue from 'vue'
import App from '../app.vue'

Vue.config.productionTip = false;

document.addEventListener('DOMContentLoaded', () => {
    const app = new Vue({
        render: h => h(App, {
            props:{
                value: JSON.parse(document.querySelector("#app").dataset.initialValue)
            }
        })
    }).$mount()
    document.body.appendChild(app.$el)
})

앱 / 스크립트 / 앱표시하다

<template>
  <div>
  {{ value.content }}
  </div>
</template>

<script lang="ts">
export default {
  name: "App",
  props: {
    value: Object
  }
};
</script>

나는 젬곤의 힘을 이용해서 이 일을 할 수 있는 방법을 찾았다.

1. 컨트롤러로

class MyController < ApplicationController
  def index
    @user = User.first
    gon.user = @user
  end
end

2. 레이아웃:

# app/views/layouts/application.html.erb
<%= Gon::Base.render_data %>

3. 웹패커 엔트리 파일에 저장

// app/javascript/packs/hello_vue.js
import Vue from 'vue'
import HelloVue from '../views/HelloVue.vue'

window.addEventListener('load', () => {
  const app = new Vue({
    el: document.getElementById('div-you-want-to-mount'),
    components: { HelloVue },
    render: h => h(HelloVue, { props: gon })
  }).$mount()
})

4. HelloVue에 있습니다.표시하다

<template>
  <div id="hello">
    User: {{ user }}
  </div>
</template>

<script>
export default {
  props: ['user']
}
</script>

언급URL : https://stackoverflow.com/questions/45361924/rails-vuejs-webpacker-passing-instance-variable-data