Vue2.5初始加载隐藏动态输入框问题求助

你好！针对你遇到的问题，核心思路是通过控制v-select的选中状态来切换输入框的显示，而不是依赖fields.length。下面是具体的修改方案：

1. 修正事件绑定写法 + 初始化数据状态 #

首先注意：Vue 2中事件绑定要用@change（或v-on:change），你原来的:on-change是错误写法，会导致addRow方法无法触发。同时在Vue实例的data里，把selected初始化为空值，确保页面加载时没有选中任何选项：

data() {
  return {
    selected: '', // 初始未选中任何选项
    fields: []
  }
}

2. 修改输入框的显示条件 #

把输入框区域的v-if从fields.length > 1改成selected !== ''（判断是否已选中v-select的选项），这样初始时因为selected为空，输入框会隐藏，选中选项后才会显示：

<v-select 
  v-model="selected" 
  @change="addRow" 
  :options="['foo','bar']"
></v-select>

<!-- 仅在选中选项后显示输入框区域 -->
<div class="input-group" v-for="(field, index) in fields" :key="index" v-if="selected">
  <input type="text" v-model="field.sensitive">
</div>

3. 优化addRow方法（可选） #

如果你的addRow是用来添加输入框行的，建议在方法里先判断是否已选中选项，避免无意义的行添加：

methods: {
  addRow() {
    // 确保选中选项后再添加输入行
    if (this.selected) {
      this.fields.push({ sensitive: '' });
    }
  }
}

完整可运行示例 #

<template>
  <div>
    <v-select 
      v-model="selected" 
      @change="addRow" 
      :options="['foo','bar']"
    ></v-select>

    <div class="input-group" v-for="(field, index) in fields" :key="index" v-if="selected">
      <input type="text" v-model="field.sensitive" placeholder="请输入内容">
    </div>

    <!-- 提交按钮也可以绑定选中状态控制显示 -->
    <button type="submit" v-if="selected">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      fields: []
    }
  },
  methods: {
    addRow() {
      if (this.selected) {
        this.fields.push({ sensitive: '' });
      }
    }
  }
}
</script>

这样修改后，页面加载时输入框区域会完全隐藏，当你选中v-select的任意选项后，输入框就会自动显示出来，完美匹配你的需求。

内容的提问来源于stack exchange，提问作者Rocky