Установить значение для модели Vue из процесса рендеринга рельсов - PullRequest
Новая
       15

Установить значение для модели Vue из процесса рендеринга рельсов

0 голосов
/ 01 октября 2019

Я создаю законченное приложение rails, но я добавляю <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> aka Vue framework только для обработки нескольких специфических задач. Одной из таких задач является управление компонентом ввода диапазона, например:

_a_single_layout.html.erb 

<div id="app">
  <h1>{{progress}}%</h1>
  <input type="range" min="0" max="100" v-model="progress">
</div>

application.js 

let app = new Vue({
  el: "#app",
  data: {
    progress: 0
  }
})

Что я получаю:

enter image description here

Проблема заключается в том, как установить текущее сохраненное значение изПриложение rails здесь и в то же время привязывают это значение к модели Vue.

Что я пробовал: 

<h1>{{progress = <%= @model.progress %>}}%</h1>

● Это фактически присваивает значениетак же, как я хочу, но ввод диапазона застревает. 

<input type="range" min="0" max="100" v-bind:progress="<%= @model.progress %>">

● Это перемещает диапазон в его ожидаемое положение, но перестает обновлять представление, когда я перемещаю его с помощью мыши. 

<input type="range" v-model="progress" v-bind:progress="<%= @model.progress %>">

● Установите оба, v-model и v-bind, чтобы последний игнорировался. 

let app = new Vue({
  el: "#app",
  data: {
    progress: <%= @model.progress %>
  }
})

● Также я попытался записать значение на стороне javascript, но это неверный синтаксис дляrails.

● Я ищу что-то вроде v-on:load="progress = <%= @model.progress %>", но, похоже, у v-on нет обработчика событий загрузки.

Вотвещи, которые я попробовал на ручке: https://codepen.io/alex3o0/pen/XWrLwwm

Ответы [ 2 ]

0 голосов
/ 03 октября 2019

Решение состоит в том, чтобы создать компонент Vue.
Затем вы можете передавать данные 'rails' в Vue через этот компонент с помощью реквизита. Вам просто нужно сначала преобразовать его в JSON:

_a_single_layout.html.erb 

<div id="app">
  <load-progress :progress="<%= @model.progress.to_json %>"></load-progress>
</div>

application.js 

const LoadProgress = Vue.component('load-progress', {
  template: `
    <div>
      <p>{{ progress }}%</p>
      <input type="range" min="0" max="100" :value="progress">
    </div>`,
  props: ['progress']
})

const app = new Vue({
  el: '#app',
  components: { LoadProgress }
})
0 голосов
/ 01 октября 2019

Я просто выбрал какое-то хитрое решение;Я установил в моей переменной модели rails переменную модели Vue, которая «застряла», но в созданном методе (используя setTimeout для задержки действия ¯ \ _ (ツ) _ / ¯) я переназначил это значение на второе и полностью свободное Vueпеременная модели:

_a_single_layout.html.erb 

<div id="app">
  <span class="hide-me">{{real_value = <%= @model.progress %>}}</span><!-- this variable gets the value from the rails model but also gets "stuck" -->
  <h1>{{progress}}%</h1>
  <input type="range" min="0" max="100" v-model="progress"><!-- this variable will get its real value when the "created" method starts -->
</div>

application.js 

let app = new Vue({
  el: "#app",
  data: {
    progress: 0,
    real_value: 0
  },
  created: function(){
    setTimeout(() => this.progress = this.real_value, 1000)
  }
})

КстатиЯ все еще ищу «правильное» решение.

...