Vue.js中如何用数组判断v-if条件及多选下拉动态添加行

问题1：如何在Vue.js的HTML模板中使用数组判断v-if条件？ #

在Vue模板里用数组做v-if判断，得看你具体的判断需求，给你列几种最常用的场景：

• 判断数组是否非空：直接用数组的length属性就行，空数组的length是0，在Vue里会被解析为false，很直观：

  <div v-if="myArray.length > 0">数组里有内容时显示这块</div>
  <div v-else>数组空的时候显示这个</div>
  

• 判断数组是否包含某个特定值：用ES6的includes()方法最方便，要是需要兼容旧环境就用indexOf()：

  <!-- 现代浏览器用includes -->
  <div v-if="myArray.includes('要找的值')">找到目标值啦，显示这块</div>
  <!-- 兼容旧环境用indexOf -->
  <div v-if="myArray.indexOf('要找的值') !== -1">同样能判断是否包含目标值</div>
  

• 判断数组长度是否达标：比如要数组至少有3个元素，直接写逻辑表达式就行：

  <div v-if="myArray.length >= 3">数组长度够啦，显示内容</div>
  

• 根据数组对象的属性判断：如果数组里存的是对象，用some()判断是否存在符合条件的元素，every()判断所有元素都符合条件：

  <!-- 判断有没有状态为active的对象 -->
  <div v-if="myArray.some(item => item.status === 'active')">有激活状态的元素哦</div>
  <!-- 判断所有元素状态都是active -->
  <div v-if="myArray.every(item => item.status === 'active')">全都是激活状态！</div>
  

问题2：多选下拉框选中多个选项时，无法动态添加对应行的问题 #

看你描述的情况，大概率是没正确处理多选后的选中值数组，或者动态渲染的逻辑有问题。给你一套可行的解决方案，你可以对照自己的代码调整：

第一步：确保下拉框的多选配置正确 #

首先得让下拉框支持多选，比如原生的<select>要加multiple属性，要是用UI组件（比如Element UI的el-select）就得开multiple属性。以原生为例：

<select multiple v-model="selectedOptions">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

这里selectedOptions会是一个数组，自动存下所有选中的选项值，一定要在Vue实例的data里把它初始化成数组哦：

data() {
  return {
    selectedOptions: [] // 必须初始化为数组，不然多选会出问题
  }
}

第二步：用v-for动态渲染对应行 #

然后直接遍历selectedOptions数组生成对应的行，这样选几个就会自动生成几行：

<div id="addForm">
  <!-- 动态生成的行 -->
  <div class="row" v-for="(option, index) in selectedOptions" :key="index">
    <div class="col-md-4">
      <div class="form-group label-floating">
        <label class="control-label">对应选项：{{ option }}</label>
        <!-- 这里放你需要的表单控件，比如输入框 -->
        <input type="text" class="form-control" placeholder="请输入内容">
      </div>
    </div>
  </div>
</div>

可能的坑点排查 #

要是这么改了还是不行，你可以检查这几点：

• 确认selectedOptions确实是数组类型，初始化的时候别写成字符串或者其他类型了。
• 如果你用的是第三方UI组件的多选框，去看看组件文档，确认v-model返回的是不是数组（有些组件可能需要额外配置）。
• v-for的key尽量用选项的唯一标识（比如选项ID），别用index，如果选项顺序变化或者有重复值的话，index会导致渲染异常。

比如你的选项是对象的话，可以这么写：

data() {
  return {
    optionsList: [
      { id: 1, name: '选项1' },
      { id: 2, name: '选项2' },
      { id: 3, name: '选项3' }
    ],
    selectedOptions: []
  }
}

对应的模板：

<select multiple v-model="selectedOptions">
  <option v-for="opt in optionsList" :value="opt" :key="opt.id">{{ opt.name }}</option>
</select>

<div class="row" v-for="opt in selectedOptions" :key="opt.id">
  <div class="col-md-4">
    <div class="form-group label-floating">
      <label class="control-label">{{ opt.name }}</label>
      <input type="text" class="form-control">
    </div>
  </div>
</div>

这样不管你选几个选项，对应的行都会乖乖渲染出来啦。

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