コンテンツにスキップ

[Vue] FAQ

scopedスタイルの子コンポーネントを指定したい

XXXComponent内にinnerクラスが存在するけど、scoped属性でスタイル指定したい場合に...

<template>
  <XXXComponent />
</template>
<style scoped>
>>> .inner {
  width: 18px;
}
</style>

v-modelで指定したプロパティが同期しない

:v-model="hoge"のようにv-bind形式になっている

v-ifv-forと同様、v-model:の前置は不要.

v-model="_hoge"のようにアンダースコアで始まった名前になっている

アンダースコアから始まるプロパティはVueで正しく動作しない. (プロキシされない)

変更があってもcomputed propertyが再計算されない

computedの式で参照しているプロパティが初期化されているかを確認する。
undefinedの代入もNG。

NGの例

const hoge: string | null;
const hoge: string | undefined = undefined;

OKの例

const hoge: string | null = "";
const hoge: string | null = null;

v-modelを指定するコンポーネントを作りたい

以下を参照。Vue3になったら変わる。

  • プロパティにvalueを指定
  • 値に変更があったらinputイベントをemitしてvalueを送出する

watchしたプロパティに変更があっても処理が実行されない

配列やオブジェクトの内部変更を検知するには{ deep: true }が必要。
computedでは不要なので間違えやすい。

パーツがクリックされたら表示されるダイアログコンポーネントを作りたい

最小構成で以下のような感じ。
<slot></slot>の部分にトリガーとなるパーツを外側から指定する。

<template>
  <div>
    <v-dialog v-model="state.visible">
      <template v-slot:activator="{ on, attrs }">
        <div v-bind="attrs" v-on="on">
          <slot></slot>
        </div>
      </template>
      <div>なかみ</div>
    </v-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "@vue/composition-api";

export default defineComponent({
  setup(props) {
    const state = reactive({
      visible: false,
    });

    return {
      state,
    };
  },
});
</script>

呼び出し側。

<your-dialog>
    <button>トリガーとなるパーツ</button>
<your-dialog>