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 인스턴스 데이터를 진실의 소스로 취급합니다. 구성 요소의 데이터 옵션 내에서 JavaScript 측면에서 초기 값을 선언해야합니다.

또는

당신의 V-모델 표현의 초기 값은 옵션 중 하나와 일치하지 않는 경우, 요소는 "선택되지 않은"상태로 렌더링됩니다. 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>