Rails 6 and Vue component

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");

但我无法在Railsjavascript/packs/light_bar.js中创建这样的组件。

请问，如何在Rails javascript中创建一个组件？我的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);
});