X’ directive requires exactly one expression argument の解決方法

作成日 2025.07.08
Vue.js
Vue.js

このエラーは、Vue.jsでディレクティブを使用する際に、式が必要なディレクティブに対して適切な式が渡されていない場合に発生します。具体的な発生条件とその対処方法を解説します。

1. 1. エラーが発生する条件
2. 2. エラーの具体例
3. 3. ディレクティブに式を渡す
4. 4. v-bindの短縮記法でのエラー
5. 5. 動的ディレクティブのエラー例
6. 6. 空の式の特定
7. 7. ESLintでの検出
8. 8. ディレクティブの仕様を確認
9. 9. ディレクティブのカスタマイズ
10. 10. 条件付きレンダリングでの注意点
11. 11. データの初期化
12. 12. テストケースでの検証
13. 13. 結論

1. エラーが発生する条件

カスタムディレクティブや組み込みディレクティブが式を要求しているが、式がない
ディレクティブの使用方法が間違っている
テンプレート構文での記述が不適切

2. エラーの具体例

以下のコードでエラーが発生します。

<div v-if></div> <!-- 式がない -->
<div v-bind:style></div> <!-- 式がない -->

3. ディレクティブに式を渡す

式を渡すことでエラーを防げます。

<div v-if="isVisible"></div>
<div v-bind:style="{ color: 'red' }"></div>

4. v-bindの短縮記法でのエラー

v-bindの短縮記法を使用する場合も、式を指定する必要があります。

<div :style="{ color: 'blue' }"></div>

5. 動的ディレクティブのエラー例

動的ディレクティブも同様に式が必要です。

<div v-on:[event]="handleEvent"></div> <!-- eventがnullの場合エラー -->

eventが動的に決定される場合、適切な値を必ず指定します。

6. 空の式の特定

空の式が含まれるコードを特定し修正します。

// 修正前
<div v-model></div>

// 修正後
<input v-model="userInput">

7. ESLintでの検出

ESLintとプラグインを使用して空の式を検出できます。

// eslint-plugin-vue の設定例
module.exports = {
  extends: [
    'plugin:vue/vue3-recommended'
  ],
  rules: {
    'vue/valid-v-bind': 'error'
  }
};

8. ディレクティブの仕様を確認

公式ドキュメントでディレクティブの仕様を確認し、必要な式を理解します。

例: Vue.js Template Syntax

9. ディレクティブのカスタマイズ

カスタムディレクティブを作成する場合、引数のチェックを追加します。

app.directive('custom-directive', {
  beforeMount(el, binding) {
    if (!binding.value) {
      console.error('This directive requires an expression.');
    }
  }
});

10. 条件付きレンダリングでの注意点

v-ifやv-showに空の式を渡さないようにします。

<div v-if="condition"></div>

11. データの初期化

式が参照するデータがundefinedにならないよう、適切に初期化します。

export default {
  data() {
    return {
      isVisible: false // 初期化済み
    };
  }
};

12. テストケースでの検証

テストを実行して式が適切に設定されていることを確認します。

例:

// Jest でのテスト例
import { mount } from '@vue/test-utils';
import MyComponent from '@/components/MyComponent.vue';

test('directive has correct expression', () => {
  const wrapper = mount(MyComponent, {
    props: { isVisible: true }
  });
  expect(wrapper.html()).toContain('v-if="isVisible"');
});