[Vuejs]-Vue model is not working and doesn't perform the function

by

0👍

Maybe your problem lies here?

v-model will ignore the initial value, checked or selected attributes found on any form elements. It will always treat the Vue instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the data option of your component.

Or

If the initial value of your v-model expression does not match any of the options, the element will render in an “unselected” state. On iOS this will cause the user not being able to select the first item because iOS does not fire a change event in this case. It is therefore recommended to provide a disabled option with an empty value.

So, if you initialized the ‘password_options’ to ‘keep’, also make this option as selected in you form:

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

And give to the other options same name attribute:

<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>

Look for this demo:

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>

0👍

I hope I understood your problem correctly. Here is a way how to show/hide input field with radio button.

Initiate function “toggleField” on radio button check:

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

Initiate toggle variable:

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

Create a method that would toggle it’s value:

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

Wrap the input field in div tag and add v-if statement:

<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>

0👍

I’m just mentioning the mistake that I have made which resulted in the same problem.

I used :v-model instead of v-model

Kindly check if v-model has been used.

May be it will help someone who had done the same mistake as mine.

Leave a comment