Rails6、Vue.js３で、Vueコンポーネントを使用せずにerb上のタグにVueを適応させたい
前提・実現したいこと
Rails + Vue.jsで都道府県に応じた市区町村を表示するセレクトボックスを作成する
↑こちらの記事の機能を実装するためにVue.jsを導入しました（"Hello, Vue3"の表示はできており、Vueの導入自体は完了しています）。
上記記事ではVue２を用いており、こちらをVue3で書き換えたいのですが、エラーにより１日以上つまずいております。
上記記事同様、app.vueを用いず、hello_vue.jsのみの操作でRailsにVueを適用したいです。
バージョン情報
- Rails -> 6.1.6
- vue -> 3.2.37
- vue-loader -> 16.0.0
発生している問題・エラーメッセージ
- {{ message }}の表示が変わらない
該当のソースコード
app/views/home/index.html.erb
<%= form_with id: 'example_form' do |f| %>
<%= f.select :industry, options_for_select(Industry.all.map{ |pref| [pref.name, pref.id] }) %>
<%= f.select :occupation, [] %>
<%= f.submit '検索' %>
{{ message }}
<% end %>
<%= javascript_pack_tag 'hello_vue' %>
app/javascript/packs/hello_vue.js
#import App from './app.vue'は使いません。
import { createApp } from 'vue'
createApp ({
el: '#example_form',
data() {
return {
message: 'hello world!'
}
},
});
app/javascript/packs/application.js
require('./hello_vue.js')
#他の記述は省略しています。
念の為、app.vueも掲載いたします。
app/javascript/packs/app.vue
<template>
<div id="app">
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello Vue3!"
}
}
}
</script>
<style scoped>
p {
font-size: 2em;
text-align: center;
}
</style>
自分で調べたことや試したこと
Vue 3の新しい機能と変更点・全11件
こちらの記事をはじめとした、Vue３に関する記事を参考に記述を変えながら様々試したのですが、解決できませんでした。
Vue３ではVueコンポーネントを使用せずにerb上のタグにVueを適応させるということができない可能性、ファイル構造やその他記述に間違いがある可能性があると考え、経験者の皆様の声をお聞きしたく、質問させていただきました。
よろしくお願いいたします。
0