VUEモデルが機能していないため、機能が実行されません

Question

これは私のフォームファイルです.VUE入力フィールドが含まれています。そのオプションを選択した場合にのみそのフィールドを表示します。新しいパスワードを手動で設定します。それが問題が存在する最後のフィールドです。

<div class="field"> 
    <label for="password" class="label">Password</label> 
    <p class="control"> 
     <b-radio-group v-model="password_options"> 
      <div class="field"> 
       <b-radio name="password_options" value="keep" selected> 
        Do Not Change Password 
       </b-radio> 
      </div> 
      <div class="field"> 
       <b-radio name="password_options" value="auto"> 
        Auto Generate New Password 
       </b-radio> 
      </div> 
      <div class="field"> 
       <b-radio name="password_options" value="manual"> 
        Manually Set New Password 
       </b-radio> 
       <p class="control"> 
        <input type="text" class="input m-b-10 m-t-10" name="password" id="password" 
          v-if="canShowThis" placeholder="Manually give a password to this user"> 
       </p> 
      </div> 
     </b-radio-group> 
    </p> 
</div> 

<button class="button is-primary"> 
    <i class="fa fa-refresh m-r-10"></i>Update User 
</button> 


<script> 
    var app = new Vue({ 
    el: '#app', 
    data: { 
     password_options: 'keep' 
    } 
    computed: { 
     canShowThis() { 
     return ['auto', 'manual'].includes(this.password_options) 
     } 
    } 
    }); 
</script> 

Answer 1

多分あなたの問題はここにありますか？

v-modelは、フォーム要素の初期値、チェック済みまたは選択済みの属性を無視します。 Vueインスタンスのデータは常に真実のソースとして扱われます。初期値は、コンポーネントのdataオプションのJavaScript側で宣言する必要があります。

それとも

あなたのV-モデル式の初期値は、オプションのいずれかと一致しない場合、要素は「未選択」の状態でレンダリングされます。 iOSでは、この場合、iOSが変更イベントを発生させないため、最初のアイテムを選択できなくなります。したがって、無効なオプションに空の値を指定することをお勧めします。

だから、

、あなたは「維持」から「password_options」を初期化する場合は、あなたの中に選択したとしても、このオプションを作るには形成：

<div class="field"> 
    <b-radio value="keep" selected>Do Not Change Password</b-radio> 
</div> 

そして、他のオプションと同じname属性に与える：

このデモの

<div class="field"> 
    <b-radio name="password_options" value="keep">Do Not Change Password</b-radio> 
</div> 
<div class="field"> 
    <b-radio name="password_options" value="auto">Auto Generate New Password</b-radio> 
</div> 

ルック：

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    option: 'val1' 
 
    }, 
 
    computed: { 
 
    canShowThis() { 
 
     return ['val3', 'val4'].includes(this.option) 
 
    } 
 
    } 
 
})

<div id="app"> 
 
    <input name="group" type="radio" v-model="option" value="val1" selected> 
 
    <input name="group" type="radio" v-model="option" value="val2"> 
 
    <input name="group" type="radio" v-model="option" value="val3"> 
 
    <input name="group" type="radio" v-model="option" value="val4" v-if="canShowThis"> 
 
    <p>Selected option value: {{ option }}</p> 
 
</div> 
 

 
<script src="https://unpkg.com/vue"></script>

<div class="field"> 
    <label for="password" class="label">Password</label> 
    <p class="control"> 
    <b-radio-group> 
     <div class="field"> 
     <b-radio name="password_options" value="keep" selected v-model="password_options"> 
      Do Not Change Password 
     </b-radio> 
     </div> 
     <div class="field"> 
     <b-radio name="password_options" value="auto" v-model="password_options"> 
      Auto Generate New Password 
     </b-radio> 
     </div> 
     <div class="field"> 
     <b-radio name="password_options" value="manual" v-model="password_options"> 
      Manually Set New Password 
     </b-radio> 
     <p class="control"> 
      <input 
      type="text" 
      class="input m-b-10 m-t-10" 
      name="password" 
      id="password" 
      v-if="canShowThis" 
      placeholder="Manually give a password to this user" 
      > 
     </p> 
     </div> 
    </b-radio-group>  
    </p> 
</div> 

<button class="button is-primary"> 
    <i class="fa fa-refresh m-r-10"></i>Update User 
</button> 

<script> 
    var app = new Vue({ 
    el: '#app', 
    data: { 
     password_options: 'keep' 
    } 
    computed: { 
     canShowThis() { 
     return this.password_options === 'manual' 
     } 
    } 
    }); 
</script> 

Answer 2

は私が私が正しくあなたの問題を理解したいと考えています。ラジオボタンで入力フィールドを表示/非表示にする方法です。

は、ラジオボタン、チェックに "toggleField" 機能を開始します

は

<b-radio name="password_options" value="manual" @change-value="toggleField"> 
    Manually Set New Password 
</b-radio> 

は変数トグル開始：

methods: { 
    toggleField() { 
    this.toggle = !this.toggle; 
    }, 

ラップ：

data: function() { 
    return { 
    toggle: false 
    } 

はトグルうメソッドを作成し、それが価値ですdivタグの入力フィールドとv-if文の追加：

<div v-if="toggle === true"> 
    <p class="control"> 
     <input type="text" class="input" name="password" 
       id="password" v-if="password_options == 'manual'" 
       placeholder="Manually give a password to this user"> 
    </p> 
</div>