Help us understand the problem. What is going on with this article?

Vue.jsの初歩的なミス

たぶん、Vue.jsを使い慣れている人は起こさないであろう、本当に初歩的なミス。

慣れないうちはエラーの内容から何がいけないのか推測しにくいと思ったので自分の備忘記録のためにも・・・
というかそれがメイン。調べてもなかなか見つけられなくて時間かかりすぎる・・・(自分の知識がなさすぎるから)

随時追記していく予定です。間違っていたらコメントください。

scriptの位置

いつも(jQuery)の癖で、headタグ内に書いていて動かなかった。
CDNの読み込みはheadタグ内でも問題ない。
id="app"とした場合、そのel: '#app'に関するの記述は、id="app"より後ろでないといけない。
インラインの場合も外部ファイルの場合も同様。

もしかしてこれかもって気づくまで2hくらい つらい
参考:https://qiita.com/icbmuma/items/49078cbe7cfe7dd2cd5f
これにたどり着けて確信。

el: '#app'が複数存在している

これは、ちゃんと自分で考えてすすめていたら起きなそうだけど。
私の場合は、いろんなものを参考にしながらすすめていたため、消し忘れていて気づかずにずっと使っているコードだけを確認していた。
一部動いて一部動かないみたいな状態だったので、余計に気づかなかった。
それに気がついたの多分3h後とか。。。ないた

dataに定義し忘れている

それに関わる部分が、ごっそり表示されない。
でも、Consoleにエラーが出るからまだわかる

{{ messege }}{が一つでもかけている

純粋なタイプミスだが、elで指定していた部分すべてがなにも表示されないのでどこをミスったのか探すのに時間がかかった。
Consoleにも何も出ない。
コードも何も出ていない。

this.のつけ忘れ

これは、この先もやりそう・・・
すぐ気づくようにはなってきたけど・・・
特に、methods:の中で他のメソッドを呼びたい時とか忘れる。

setTimeoutの書き方

setTimeout(this.close(), 3000);
ではなくて
setTimeout(this.close, 3000);

コンポーネントにv-on:clickを付けたい場合

子コンポーネントで親のメソッドを呼びたい時

例えばこんなやつ
<next-button v-on:click="search_start">次へ</next-button>

.nativeが必要
<next-button v-on:click.native="search_start">次へ</next-button>

コンポーネントで持たせたい属性のデータの中に別のデータも持ちたい時

<com-child val="あなたは{{ select_value }}を選択した">
こんな感じなことをしたいとき(↑は{{ select_value }}がそのまま文字列として表示される)

<com-child :val="'あなたは' + select_value + 'を選択した'">
これでいける

ひとつの記事にまとめました
Vue.jsで属性かv-bindかの応用

template要素はコンポーネント内では使えない

v-ifで要素を出し分けたい時には、<template v-if="valueA">のように出し分けたい要素が複数あった場合でも、HTML構造を変えることなく使えるが、
コンポーネントのテンプレートを定義するところでは使えない。

template: '<template><p>コンテンツ1</p><p>コンテンツ2</p></template>'
これは間違いで表示されない

コンポーネントでpropsを使う場合はケバブとキャメルに注意!

コンポーネントを定義する側ではキャメルtitleText
HTML側ではタグ名・属性名はケバブtitle-text

classやid,valueなどにbindするときは:をつける

よく忘れて、ん?ってなる・・・

<input type="radio" :id="who.val" :value="who.val" v-model="form.who">
例えばこんなやつ

v-modelはコンポーネントできない

v-modelをコンポーネント内にセットし、propsで値を渡すことはできない。

<vue-input name="input" v-model="form.input"></vue-input>
のように、v-modelを付けたい要素がルートなコンポーネントはできる

<div class="textArea"><textarea v-model="form.textarea"></textarea></div>
のように、ルートでない場合はできない

window または document が undefined のとき

とあるモジュールを入れたら、
document is not defined とか window is not defined とかでた。
<no-ssr> で囲う
参考:https://crieit.net/posts/Nuxt-document-is-not-defined

$store.getterscomputedで呼ぶ

呼ぶっていう表現があっているかわからないけど、、
storeで定義している値を参照するときはdataではなくてcomputedに書く

dataに書くと、たまにデータがまだ取得できていない時に処理が走っているよう

※追記
基本的にはcomputedで問題なさそうだけど、抜け落ちる時もあるっぽい・・・

おまけ

これは、Vue.jsに限ったことではないけど、間を開けずに勉強実践習得すべき・・・

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした