Что такое чистый, простой и рекомендуемый способ реализации форм в рельсах с Vue. js компонентами - PullRequest
Новая
       6

Что такое чистый, простой и рекомендуемый способ реализации форм в рельсах с Vue. js компонентами

0 голосов
/ 05 февраля 2020

С различными статьями в Интернете для рельсовых форм с vue и целым рядом подходов кажется, что существует много путаницы в отношении того, что является наиболее элегантным решением. Моя главная задача состояла в том, чтобы передать объект данных / модели из представления rails в vue компонент, но я также могу использовать другие рекомендации. Я бы предпочел придерживаться рельсов для максимально возможной функциональности и использовать Vue только для javascript совершенства (в моей текущей форме это пока только проверки на стороне клиента).

Вот что я имею до сих пор (Я также использую Buefy в качестве библиотеки компонентов): 

# app/views/organizations/new.html.erb

<%= form_with(model: @organization, local: true) do |form| %>
  <organization-create-new-form
    :data=<%= { organization: @organization }.to_json %>>
  </organization-create-new-form>
<% end %>

Я сохранил тег form_with в представлении рельсов, так что мне не нужно обрабатывать часть токена CSRF в vue компонент. 

# organizationCreateNewForm.vue

<template>
<section class="hero is-bold is-fullheight">
  <div class="hero-body">
    <div class="container has-text-centered">
      <h1 class="title">
        Create a new workspace for your organization
      </h1>
      <h2 class="subtitle">
        Enter your organization name below
      </h2>
      <div class="columns">
        <div class="column is-half is-offset-one-quarter">
          <b-field>
            <b-input placeholder="Organization Name" size="is-large"></b-input>
          </b-field>

          <b-button type="is-primary" size="is-medium" native-type="submit">Continue</b-button>
        </div>
      </div>
    </div>
  </div>
</section>
</template>

<script>
export default {
  data () {
    return {
      organization: JSON.parse("still need to figure out how to get data here from rails view")
    }
  }
}
</script>

# application.js where `content` is the id of my top level div in my rails layout

import TurbolinksAdapter from 'vue-turbolinks'
import Vue from 'vue/dist/vue.esm'
import Buefy from 'buefy'
import '../stylesheets/application.scss'
import Vuelidate from 'vuelidate'

Vue.use(TurbolinksAdapter)
Vue.use(Buefy)
Vue.use(Vuelidate)

document.addEventListener('turbolinks:load', () => {
  const app = new Vue({
    el: '#content',
  })
})

Вещи, которые я хочу выяснить:

  • Каков наилучший способ передачи данных / объекта из вида рельсов в компонент. Многие онлайн-учебники используют getElementById, а затем читают данные из атрибута и анализируют их в файле приложения. js при инициализации компонента. Каковы лучшие практики здесь, когда я хочу сделать это внутри компонента? Где (при каком триггере) происходит разбор внутри компонента?
  • Любой предпочтительный способ абстрагирования всех преобразований json (в представлении rails) и синтаксического анализа (в компоненте vue) для каждой формы во что-то просто?
  • Я все еще хочу отправить форму как обычную форму рельсов (а не ajax), что, я думаю, произойдет автоматически в текущей структуре. С турболинками нормальная подача формы выглядит довольно гладко.

Использует ли кто-то минимальную многоразовую настройку для реализации форм рельсов с использованием vue компонентов. Будет очень полезно, если вы сможете поделиться тем же! Спасибо за помощь!

...