コンテンツにスキップ

[Nuxt] FAQ

Actionが上手く動かない

dispatchをawaitしていない場合

dispatchはActionを呼び出すものです。
Actionは非同期前提の処理なので、戻り値はPromise<any>です。

以下2点を確認してみてください。

  • action functionをasyncしていること
  • dispatchをawaitしていること

v-ifやv-forが上手く動かない

コロンがついていないことを確認する。 :v-for:v-ifはNG。

イベントハンドラが上手く動かない

:clickのように間違えて:を付けていないか確認する。
正解は@click

Vueクラスのdataを変更してもViewが更新されない(再計算されない)

以下のように初期値の代入忘れがないか確認する。

name: str

初期値が無いとVueのdataとは見なされずに更新されない。

nullでも以下のように明示的指定が必要。

name: str | null = null

外部packageのコンポーネントが無いと言われる

nuxt.config.tspluginsに追加されていることを確認する。

コンポーネントにHTMLやコンポーネントをネストさせたい

slotを使う。

以下のようなInnerComponentを差し込みたい場合...

<YourComponent key=value>
    <InnerComponent />
</YourComponent>

以下のように書くと...

<template>
    <div>
        <p>コンポーネントの中身</p>
        <slot></slot>
    </div>
</template>

<slot></slot>の部分に<InnerComponent />が差し込まれる。

名前付きもできる。