実行環境 macOS 10.15.7 (19H1217) Vue.js 2.6.14 本題 例として，以下のようなオブジェクトhogeについて考えます。 Hoge.vue ... {{ hoge.prop1 }} {{ hoge.prop2 }} ... data: function() { return { hoge: { prop1: 'prop1' } } } ... hoge.prop1については，以下の操作を行うことで，HTML上の値も更新されます。 this.hoge.prop1 = 'newProp1' では，hoge.prop2についても同様に以下の操作を行うことで，HTML上の値も更新されるのでしょうか。 this.hoge.prop2 = 'prop2' 実は，これでは更新されません。 dataブロック内でhogeのプロパティとしてprop2が定義されていないためです。 しかし，以下の操作を行うと更新されます。 this.$set(this.hoge, 'prop2', 'prop2'); このように，Vue.jsでは，新しいプロパティをリアクティブにするためには，setを使う必要があります。 参考文献 https://it-web-life.com/vue_object_not_updated/ https://jp.vuejs.org/v2/api/index.html#Vue-set

Rails×VueでSPA化に取り組んでいる初学者の備忘録です。 エラー詳細 Vueを用いてフラッシュメッセージを表示するため@smartweb/vue-flash-messageを導入。 https://www.npmjs.com/package/@smartweb/vue-flash-message/v/next npm i @smartweb/vue-flash-message@next 開発環境で問題なく動作したためherokuにデプロイしようとしたところ次のエラーが発生した。 ModuleNotFoundError: Module not found: Error: Can't resolve '@smartweb/vue-flash-message' in '/tmp/build_7d25413c/app/javascript/packs' at . . . . . Field 'browser' doesn't contain a valid alias configuration resolve as module looking for modules in /tmp/build_7d25413c/app/javascript using description file: /tmp/build_7d25413c/package.json (relative path: ./app/javascript) Field 'browser' doesn't contain a valid alias configuration using description file: /tmp/build_7d25413c/package.json (relative path: ./app/javascript/@smartweb/vue-flash-message) no extension Field 'browser' doesn't contain a valid alias configuration . . . . /tmp/build_7d25413c/app/javascript/@smartweb/vue-flash-message doesn't exist エラー原因 本番環境上で@smartweb/vue-flash-messageが読み込まれていなかった。 package.json "dependencies": { "@rails/actioncable": "^6.0.0", "@rails/activestorage": "^6.0.0", "@rails/ujs": "^6.0.0", "@rails/webpacker": "^5.4.3", "@smartweb/vue-flash-message": "^1.0.0-alpha.12", "@vue/babel-plugin-jsx": "^1.1.0", "@vue/compiler-sfc": "^3.2.19", "axios": "^0.22.0", "turbolinks": "^5.2.0", "vue": "^3.2.19", "vue-loader": "^16.8.1", "vue-router": "^4.0.11", "vuex": "^4.0.2" }, package.jsonを見るとdependencesに記載があるので問題ないと思っていたがyarnでプラグインをインストールする必要があった。 解決 一度, プラグインをアンインストールし、 yarn add @smartweb/vue-flash-message@next で再インストール。herokuにデプロイしたところ、package.jsonとyarn.lockが混在していると表示が出たので git rm package-lock.json でyarn.lockを残すようにしてデプロイを実行。 エラーが解決した。

こうする <template> <v-textarea ref="hoge" /> </template> conf hogearea = this.$refs.hoge.$el.querySelector("textarea");

概要 textareaの中身を外からJSでいろいろする画面をVuetifyで作ろうとするとハマる。 実はVuetifyは関係なくてVue.jsなら（たぶん）ハマる。 やろうとしたこと あるボタンを押すとカーソル位置にテキストが差し込まれるよくあるやつ。 わりとすぐわかったこと textarea.setTextRangeはVue.jsで管理しているtextareaでは当然うまく動かない。 textarea.selectionStart、textarea.selectionEndでカーソル位置をとってきて、v-modelを直接編集する必要がある。 ハマったこと textareaのテキスト編集後のカーソル位置がいい感じにならない。 textarea.setSelectionRangeがまともに動いていないように見える。 解 setTimeout(() => bodyTextArea.setSelectionRange(2, 2)) this.$nextTick(() => { textarea.setSelectionRange(2, 2)) }) ふーんなるほどね

久々に開発を再開しようとしたら、変更したコードがビューに反映されなくて、てんやわんやしました。 Rails6 + Vue3で、webpackerを使って環境構築しており、rails sと bin/webpack-dev-serverを、それぞれ手動で立ち上げていたことをすっかり忘れていただけだったのですが、いっそまとめて管理しようと心に誓いましたので、まとめます。 gem foreman を使ってみる インストールする gem foreman を使って一元管理を試みます。アプリケーション実行の際のコマンドをまとめて管理できるという、ありがたgemです。 Gemfileに書いて bundle install しようとしましたが、この方法は非推奨とのこと。なので、以下を実行しましょう。 $ gem install foreman Procfileを新たに作成する foremanは、Procfile の内容を継承するようになっているので、ここにコマンドを書いていきます。アプリケーション直下にProcfileという名前のファイルを作成します。拡張子はいりません。 rails: rails s webpack: bin/webpack-dev-server 左側の名前は自由に変えてOK、右側が立ち上げる時に打っているコマンドですね。 Procfileの準備ができたら、あとは以下を打つだけで２つ同時に立ち上がります！ $ foreman start ログも、１つのターミナルに２つまとめて表示されます。 02:48:15 rails.1 | started with pid 74544 02:48:15 webpack.1 | started with pid 74545 02:48:16 rails.1 | => Booting Puma 02:48:16 rails.1 | => Rails 6.0.4 application starting in development 02:48:16 rails.1 | => Run `rails server --help` for more startup options 02:48:17 webpack.1 | ℹ ｢wds｣: Project is running at http://localhost:3035/ 以上。ちょっと平和になったかもしれない記事でした。 少しでも役に立つことがあればうれしいです。