Rails 6和Vue组件

Question

我有一个应用程序在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>

但不显示任何组件。有什么提示我做错了什么吗？

Answer 1

我想通了。但这有点奇怪，我在两个地方都注册了这个组件，在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);
});