vue.jsで、指定したpropsがtrueの場合に特定のhtmlタグを埋め込む方法

Question

前提・実現したいこと

vue.jsについての質問です。
とある項目（田中太郎、などの名前）を表示/入力するコンポーネントを作成したいです。

現在、propsにreadModeプロパティを設定しています。
これにtrueが入ってきた場合は表示モード、falseの場合は入力フォームモードにしたいです。
（v-if v-elseで分岐させれば良いのですが、事情があり1つにまとめたい）

該当のソースコード

<template>
  <div class="component">
      名前:<input
      type="text"
      class="form-control-plaintext"
      readonly
      :value="hitoName"
      :?????="readMode"
    />
    <!-- readMode=trueだった場合
    名前：田中太郎

    readMode=falseだった場合
    名前：(入力フォーム表示)
    -->
  </div>
</template>

<script>
export default {
  props: {
    hitoName: String, //"田中太郎"などの文字列が入ってくる
    readMode: true, //true(表示モード),またはfalse(入力モード)の指定
  },
}
</script>

bootstrapを使用しており、公式ドキュメントによると、
https://getbootstrap.jp/docs/4.1/components/forms/#readonly-plain-text

<input>にclass="form-control-plaintext"とreadonlyを設定すれば、
フォームをプレーンテキストで表示することができるので、表示/入力の切り替えにこちらを使いたいです。

考えた案として、
readModepropsがtrue（表示モード）の場合、
<input>内にclass="form-control-plaintext"とreadonlyを設定する（もしくはfalse（入力モード）の場合に取り除く）
という処理で動作するのでは？と思っているのですが、
htmlタグに埋め込むプロパティの操作の仕方がわかりません。

お詳しい方、ご教示願えませんでしょうか？
また、上記の方法以外の方が良いよ、などあれば合わせて指摘いただきたいです。
初心者質問で申し訳ありませんが、よろしくお願いします。

Answer 1

・コンポーネントのプロパティ（下記では「readOnlyMode」）にboolean値を指定して渡すことで、readonly属性の有無を制御します。

■CustomInput.vue

<template>
  <div class="form-group">
    名前:<input
      type="text"
      class="form-control-plaintext"
      :value="hitoName"
      :readonly="readOnlyMode"
    />
  </div>
</template>

<script>
export default {
  name: "CustomInput",
  props: {
    hitoName: {
      type: String,
      required: false,
      default: "名前を入力してください",
    }, //hitoNameを指定しなかった場合のdefault値
    readOnlyMode: {
      type: Boolean,
      required: false,
      default: false,
    }, //true(表示モード),またはfalse(入力モード)の指定
  },
};
</script>

■使い方の例
・data()に、hitoNameの設定値を持たせておきます。

<template>
  <div id="app">
    <CustomInput :hitoName="dataName" :readOnlyMode="false"/>
  </div>
</template>

<script>
import CustomInput from './components/CustomInput.vue'
export default {
  name: 'App',
  components: {
    CustomInput
  },
  data() {
    return {
      dataName: '田中太郎'
    }
  }
}
</script>

Comments

[umino]

qnoirさん
ご回答ありがとうございます、（すみません、回答いただいていたことに気付くのが遅れました）
なるほど、readonly要素にdata(readOnly)を持たせてdataに設定する、というやり方ですね。
こちらでも、入力/表示を切り替えることを試してみます。
サンプルコードでまで丁寧にご提示いただきまして大変助かります。
ありがとうございました。

Answer 2

Vueは詳しくないので的外れでしたら申し訳ないのですが、v-bind:classを使ってはどうでしょうか。

オブジェクト構文 | クラスとスタイルのバインディング — Vue.js

---

蛇足ですが、propsの構造はその書き方でいいのでしたでしょうか？

props | API — Vue.js

Comments

[umino]

Lhankor_Mhyさん
さっそくのご回答ありがとうございます。
アドバイスいただいた通り修正、`v-bind:class`を使用したところ、切り替えができました。
-------------
<template>
<div class="component">
名前:<input type="text"
readonly
v-bind:class="ioMode"
:value="hitoName">
</div>
</template>

<script>
export default {
data: function () {
return {
// read/write時の表示切り替え
ioMode: {
'form-control-plaintext': this.readMode,
readonly: this.readMode,
}
}
},
props: {
hitoName: String, //"田中太郎"などの文字列が入ってくる
readMode: true, //true(表示モード),またはfalse(入力モード)の指定
},
}
</script>
-------------

また、propsの構造についてもご指摘ありがとうございます。
初期値のつもりで入れていましたが、認識が誤っていたことを知りました。
こちらも教えていただいたドキュメントを元に修正しました。
---------
props: {
hitoName: {
type: String,
required: true,
},
readonly: {
type: Boolean,
default: true,
required: true,
},
---------
おかげさまで期待した結果を取得することができました。
丁寧なご回答に感謝します。ありがとうございました。

[Lhankor_Mhy]

qnoir さんのご回答を拝見して気づいたのですが、readonly はクラス指定ではなくて属性だったのですね。誤読をしていました、すみません。

qnoir さんのご回答をBAにされた方がいいと思います。

[umino]

Lhankor_Mhyさん
コメントありがとうございます、qnoirさんに回答いただいていることに気づいておりませんで、指摘いただけて助かりました。
属性であることはそうですね、ただ、教えていただいたこと（バインディング、propsの扱い方）などは普遍的なもので、大変勉強になりましたので、変わらず感謝いたします。
また、よろしくお願いします。

[Lhankor_Mhy]

BAはベストアンサーは変更できますので、今からでもつけ直していただいた方がいいのではないかな、と……