Блог

У меня есть приложение в Vue, работает отдельно. Но если я добавлю его в Rails, я не знаю, как создать компонент (у меня их много, использую v-for ). В моем автономном коде

 import { createApp } from 'vue'
import App from './App.vue'
import Bar from './components/Bar.vue';

const app = createApp(App);

app.component('light-bar', Bar);

app.mount("#light-bars");

 

Но я не могу создать подобный компонент в Rails javascript/packs/light_bar.js .

Пожалуйста, как создать компонент внутри Rails javascripts? Мой light_bar.js выглядит так:

 import Vue from 'vue'
import App from '../light-bars/app.vue'
import Bar from '../light-bars/components/Bar.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    render: h => h(App),
    components: {
      'light-bar': Bar
    }
  }).$mount('#light-bars');

  console.log(app);
});


 

Я также попытался импортировать и зарегистрировать компонент в своем приложении, например

 import Bar from './components/Bar.vue'
export default {
  name: 'App',
  data() {
    return {
      barsData: []
    };
  },
  components: {
    'light-bar': Bar
  }
...

 

и шаблон выглядит так

 <template>
  <div class="container">
    <h3>Úrovně osvětlení pro různé situace</h3>
    <div class="row">
      <light-bar
        v-for="bar in barsData"
          :key="bar.id"
          :luxRange="bar.luxRange"
          :luxRangeName="bar.luxRangeName"
          :luxLevel="bar.luxLevel"
          :compensation="bar.compensation"
      ></light-bar>
    </div>
</div>
</template>
 

Но компонент не появляется. Любые советы, что я делаю неправильно?

Я понял это. Но это немного странно, я зарегистрировал компонент в обоих местах, packs/light-bars.js а также в моем приложении.

 import Bar from './components/Bar.vue';
export default {
  name: 'App',
  data() {
    return {
      barsData: []
    };
  },
  components: {
    'light-bar': Bar
  },
...
 

и

 import Vue from 'vue'
import App from '../light-bars/app.vue'
import Bar from '../light-bars/components/Bar.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    render: h => h(App),
    components: {
      'light-bar': Bar
    }
  }).$mount('#light-bars');

  console.log(app);
});