vueをぶちこむ
./bin/rails webpacker:install:vue
turbolinksをよしなに
yarn add vue-turbolinks
で追加
設定周り
app/javascript/packs/application.js
import './hello_vue.js' import Vue from 'vue/dist/vue.esm' import TurbolinksAdapter from 'vue-turbolinks' Vue.use(TurbolinksAdapter)
app/javascript/packs/hello_vue.js のようなエントリーポイントはひとまず、
import Vue from 'vue/dist/vue.esm'
import Range from './components/range.vue'
// document.addEventListener('DOMContentLoaded', () => {
document.addEventListener('turbolinks:load', () => {
new Vue({
el: 'range',
components: { Range },
})
})
と思ったら、これだとvueのコンポーネントにしたい部分がみつからないと毎回エラーがでちゃうので、
document.querySelectorAll('.vue-component').forEach((el) => {
new Vue({
el: el,
components: { Range },
})
});
こうしました。
vue
なんかdata の中身data: functionだった
<script defer>
export default {
data: function () {
return {
selectPoint: 0
}
},
}
</script>
%range
ref
https://teratail.com/questions/280111
https://count0.org/2018/02/05/vue-into-rails.html https://qiita.com/rhistoba/items/a06f60a509e87604164e https://qiita.com/kuroda@github/items/940338b5f6f46da2c5f1 https://note.com/campfire_dev/n/n1686059962b5 https://qiita.com/tatsurou313/items/4f18c0d4d231e2fb55f4
