vue.js - Vue 模型不工作并且不执行该功能

Question

这是我的表单文件，它包含 VUE 输入字段，我只想在选中该选项时才显示该字段Manually set new password。这是存在问题的最后一个字段。

      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-model而不是v-model

请检查是否使用了v-model。

也许它会帮助那些和我犯过同样错误的人。

Answer 2

也许你的问题出在这里？

v-model 将忽略在任何表单元素上找到的初始值、选中或选定属性。它将始终将 Vue 实例数据视为事实来源。您应该在组件的 data 选项内声明 JavaScript 端的初始值。

或者

如果您的 v-model 表达式的初始值与任何选项都不匹配，则该元素将呈现为“未选择”状态。在 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>

Answer 3

我希望我正确理解了您的问题。这是一种如何使用单选按钮显示/隐藏输入字段的方法。

在单选按钮检查上启动功能“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>