Vue.js で入力フィールドを条件付きで無効化する

Vue.js で入力フィールドを条件付きで無効化する

disabled 属性は、入力フィールドを無効化するために最も簡単な方法です。この属性には、真偽値を設定できます。

<input type="text" :disabled="condition" />

上記の例では、condition が真の場合、入力フィールドが無効化されます。

例：

<template>
  <div>
    <input type="text" :disabled="!firstName" v-model="firstName" />
    <input type="text" :disabled="!firstName" v-model="lastName" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '',
      lastName: '',
    };
  },
};
</script>

この例では、firstName が空の場合、lastName 入力フィールドが無効化されます。

v-if と v-else ディレクティブを使用して、条件に応じて入力フィールドを表示することができます。

<div v-if="condition">
  <input type="text" v-model="input" />
</div>
<div v-else>
  <p>入力フィールドは無効化されています。</p>
</div>

上記の例では、condition が真の場合、入力フィールドが表示されます。そうでなければ、無効化されたことを示すメッセージが表示されます。

<template>
  <div>
    <button @click="toggleEnabled">有効/無効化</button>
    <input type="text" v-model="input" :disabled="!enabled" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      enabled: true,
      input: '',
    };
  },
  methods: {
    toggleEnabled() {
      this.enabled = !this.enabled;
    },
  },
};
</script>

この例では、ボタンをクリックすると、入力フィールドの有効/無効化が切り替えられます。

上記以外にも、v-bind ディレクティブや計算プロパティを使用して、入力フィールドを条件付きで無効化する方法があります。

<template>
  <div>
    <input type="text" :disabled="disabledInput" />
  </div>
</template>

<script>
export default {
  computed: {
    disabledInput() {
      // 条件に応じて `true` または `false` を返す
      return this.condition;
    },
  },
};
</script>

どの方法を使用するかは、状況によって異なります。シンプルな条件の場合は disabled 属性が使いやすいですが、より複雑な条件の場合は v-if と v-else ディレクティブや計算プロパティを使用する方が適切な場合があります。

注意事項

• 上記のコード例はあくまでも例であり、実際の状況に合わせて調整する必要があります。
• Vue.js の最新バージョンについては、公式ドキュメントを参照してください。

<template>
  <div>
    <label for="firstName">名前 (姓):</label>
    <input type="text" id="firstName" v-model="firstName" :disabled="!firstName" />
    <label for="lastName">名前 (名):</label>
    <input type="text" id="lastName" v-model="lastName" :disabled="!firstName" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '',
      lastName: '',
    };
  },
};
</script>

説明

v-if と v-else ディレクティブ

<template>
  <div>
    <button @click="toggleEnabled">有効/無効化</button>
    <input type="text" v-model="input" :disabled="!enabled" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      enabled: true,
      input: '',
    };
  },
  methods: {
    toggleEnabled() {
      this.enabled = !this.enabled;
    },
  },
};
</script>

計算プロパティ

<template>
  <div>
    <input type="text" :disabled="disabledInput" />
  </div>
</template>

<script>
export default {
  computed: {
    disabledInput() {
      // 条件に応じて `true` または `false` を返す
      return this.condition;
    },
  },
};
</script>

このコードでは、condition プロパティに基づいて入力フィールドを有効/無効化します。

Vue.js で入力フィールドを条件付きで無効化するその他の方法

v-bind ディレクティブを使用して、disabled 属性に条件式を設定することができます。

<input type="text" :disabled="condition" />

<template>
  <div>
    <input type="text" :disabled="!firstName || disabled" v-model="firstName" />
    <input type="text" :disabled="!firstName || disabled" v-model="lastName" />
    <button @click="toggleDisabled">無効化</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '',
      lastName: '',
      disabled: false,
    };
  },
  methods: {
    toggleDisabled() {
      this.disabled = !this.disabled;
    },
  },
};
</script>

<div v-show="condition">
  <input type="text" v-model="input" />
</div>

<template>
  <div>
    <button @click="toggleShow">表示/非表示</button>
    <input type="text" v-model="input" v-show="showInput" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: '',
      showInput: true,
    };
  },
  methods: {
    toggleShow() {
      this.showInput = !this.showInput;
    },
  },
};
</script>

カスタムコンポーネント

条件に応じて入力フィールドの有効/無効化を切り替えるカスタムコンポーネントを作成することができます。

<template>
  <div>
    <my-input :condition="condition" v-model="input" />
  </div>
</template>

<script>
import MyInput from './MyInput.vue';

export default {
  components: {
    MyInput,
  },
  data() {
    return {
      condition: true,
      input: '',
    };
  },
};
</script>

<template>
  <input type="text" :disabled="condition" v-model="value" />
</template>

<script>
export default {
  props: {
    condition: {
      type: Boolean,
      required: true,
    },
    value: {
      type: String,
      required: true,
    },
  },
};
</script>

この例では、MyInput というカスタムコンポーネントを作成し、condition プロパティと value プロパティを受け取ります。condition が真の場合、入力フィールドが無効化されます。