つむ

宮侑のようにイキりたい。

つむ

宮侑のようにイキりたい。

vue-routerを使ってボタンの名前とリンクが動的に変わるコンポーネントを作る

【やりたいこと】 ・ボタンのコンポーネントを作る ・ボタンの表記は親コンポーネント側から動的に渡したい ・ボタンをクリックしたときの遷移先も親コンポーネントから動的に渡したい 【作ったファイル】 ・MyHome.vue ・NavyButton.vue ・router.js 【各ファイルの説明】 ①MyHome.vueの説明 　・親コンポーネント 　・ホーム画面、遷移先のボタンが並んでいるイメージ 　・NavyButton.vueをscriptで読み込んで、export d

つむ

    • export defaultは1script内で1つまで

      間違いのコードはこれ。 <script>import NavyButton from './components/NavyButton.vue'export default { data () { return { title: "TOPページです。" } }};export default { components: { 'navy-button': NabyButton, }} エラーはこれ。 ERROR[eslint] C:\U

      つむ

      • vue-routerで出たエラー

        エラーの内容 [Vue Router warn]: Record with path "/" is either missing a "component(s)" or "children" property. path "/"は、router.js配下のconst routesで指定しているpath: "/"を指しているっぽい。 よく見たら、componentsのスペルが間違っていた。。下記９行目。 import { createRouter, createWebHi

        つむ

        • Vue3でvue-routerを使うときのmain.js

          最初はこれ。 import { createApp } from 'vue'import App from './App.vue'import router from './router.js'createApp({ router, render: function(h) { return h(App)} }).mount('#app') エラーはこれ。 [Vue warn]: Unhandled error during executi

          つむ

        vue-routerを使ってボタンの名前とリンクが動的に変わるコンポーネントを作る

        つむ

          vue-router設定の書き方はVue２とVue３で異なるっぽい

          Vue2だと、こんな感じ。（router.jsの中身） import Vue from 'vue'import Router from 'vue-router'import MyHome from './pages/MyHome.vue'import MyLanding from './pages/MyLanding.vue'Vue.use(Router)export default new Router({ routes:[ { path: '/',

          つむ

          vue-router設定の書き方はVue２とVue３で異なるっぽい

          つむ

          multi-word-component-namesのエラー

          こちらを参考にやっていた。 出たエラーはこれ ERROR Failed to compile with 1 error 22:57:41[eslint]C:\Users\user\Des

          つむ

          multi-word-component-namesのエラー

          つむ

          npm run serveのエラー

          環境はこう。 >node -v && vue -V && npm -vv16.14.2@vue/cli 5.0.48.5.0 エラーはこう。 > my-project@0.1.0 serve> vue-cli-service serve INFO Starting development server... ERROR ValidationError: Progress Plugin Invalid Options options should NOT

          つむ

          npm run serveのエラー

          つむ

          Vue.js練習リンク（mitsuruさんより）：ローカルcomponentの表示

          note→ 問題→ 回答→ ポイント： 　・ローカルコンポーネントの描き方はVue２とVue３で同じ 　・ローカルコンポーネントをインポートする際は、Vue,createApp()の後ろではなく、カッコの中でインポートする 　・その際、"component"ではなく"components"と、複数形にする必要あり（じゃないと、エラーになる）

          つむ

          Vue.js練習リンク（mitsuruさんより）：ローカルcomponentの表示

          つむ

          Vue.js練習リンク（mitsuruさんより）: component

          note→ 回答

          つむ

          Vue.js練習リンク（mitsuruさんより）: component

          つむ

          Vue.js練習リンク（mitsuruさんより）：v-model,算出プロパティの練習

          note→ v-modelの練習→ 算出プロパティの練習→ 回答 ポイント ・算出プロパティの中ではreturnで返す時に｛｝不要…値で返すから。 ・thisの後には変数名が必要 ・HTMLの方では算出プロパティをそのまま呼び出してOK。

          つむ

          Vue.js練習リンク（mitsuruさんより）：v-model,算出プロパティの練習

          つむ

          Vue.js練習（mitsuruさん）を解いてみた②：メソッドの練習

          見たnote→https://note.com/mitsuru_waichan/n/n901dfffd1507 問題→ 回答

          つむ

          Vue.js練習（mitsuruさん）を解いてみた②：メソッドの練習

          つむ

          Vue.js練習（mitsuruさん）を解いてみた①：dataの練習

          こちらのノートをを読みました。 問題の内容はここでした。 回答はこんな感じになりました。 ポイント① 　Consoleのエラーを見て確認する。 ポイント② 　デフォルトで記載されているのがVue2のため、Vue３に書き直す。 ポイント③ 　マスタッシュ構文を使う。

          つむ

          Vue.js練習（mitsuruさん）を解いてみた①：dataの練習

          つむ

          Vue is not a constructorが出たら、Vueのバージョンを疑え

          Vue is not a constructorが出たら、バージョン３なのに、new Vueの書き出しになっているはず。 バージョン２の書き出し→new Vue バージョン３の書き出し→Vue.createApp

          つむ

          Vue is not a constructorが出たら、Vueのバージョンを疑え

          つむ

          Console.log(${this.xxx})で変数が参照されない時①：バッククオートを疑え！

          Console.logの引数をバッククオートで囲うべし。 シングルクオートで囲ったために、１時間くらい悩んでしまった。。。 てか、バッククオートなんて単語初めて聞いたし😄 （正） console.log('入力値は、「${this.memo}」 です。'); （誤） console.log(`入力値は、「${this.memo}」 です。`); VSCode上で確認すると、バッククオートの時はちゃんご$this.memoが変数と

          つむ

          Console.log(${this.xxx})で変数が参照されない時①：バッククオートを疑え！

          つむ

          v-model.numberで認識できるのは半角のみ（全角不可）

          v-model.numberの修飾子を使っている。 全角文字列を入力すると、下記のようなエラーが出る。 ということのよう。 他方、半角を入れてみると、正しく通る。

          つむ

          v-model.numberで認識できるのは半角のみ（全角不可）

          つむ

          Vueのディレクティブに関する名称

          例えば、こんなの。 v-on:change="onchange" v-on -> ディレクティブ change -> イベント onchange -> メソッド名

          つむ

          Vueのディレクティブに関する名称

          つむ