Vue модель не работает и не выполняет функцию

Question

Это мой файл формы, и он включает в себя поле ввода VUE, я хочу показывать это поле только тогда, когда я выбрал эту опцию Вручную установить новый пароль. Это последнее поле, где проблема присутствует.

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

    <script src="https://npmcdn.com/vue/dist/vue.js"></script>
    
    <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>
  
   
 

Answer 1

Я просто упоминаю сделанную мной ошибку, которая привела к той же проблеме.

Я использовал :v-модель вместо v-модели

Пожалуйста, проверьте, использовалась ли v-модель.

Может быть, это поможет тому, кто совершил ту же ошибку, что и я.

Answer 2

Надеюсь, я правильно понял вашу проблему. Вот способ показать / скрыть поле ввода с помощью переключателя.

Инициируйте функцию "toggleField" при проверке переключателя:

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

Инициировать переменную переключения:

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

Создайте метод, который будет переключать его значение:

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

Оберните поле ввода в тег 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>

Answer 3

Может быть, ваша проблема лежит здесь?

v-модель будет игнорировать начальное значение, проверенные или выбранные атрибуты, найденные в любых элементах формы. Он всегда будет обрабатывать данные экземпляра Vue как источник правды. Вы должны объявить начальное значение на стороне JavaScript, внутри опции data вашего компонента.

Или же

Если начальное значение вашего выражения v-модели не соответствует ни одной из опций, элемент будет отображаться в "невыбранном" состоянии. В iOS это приведет к тому, что пользователь не сможет выбрать первый элемент, потому что в этом случае iOS не запускает событие изменения. Поэтому рекомендуется предоставить отключенную опцию с пустым значением.

Итак, если вы инициализировали 'password_options' для 'keep', также сделайте эту опцию такой, как выбрано в вашей форме:

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