Vue.js中v-for与v-if配合失效，表单提交文本无法显示到指定列

既然你已经确认info数组里的option值是正确的（选col2时确实是'two'），那问题肯定出在「根据option值分配到对应列」的渲染逻辑上，咱们从最常见的坑开始排查：

1. 先检查单选按钮的绑定是否正确 #

首先确认你的单选按钮v-model和value有没有写错——这是最容易踩的拼写坑：

错误示例（可能的问题点） #

如果单选按钮的value和你判断的不匹配，比如把col2的value写成了'one'，或者v-model绑定到了别的变量：

<!-- 错误：col2的value写成了'one'，和col1重复 -->
<input type="radio" v-model="newInfo.option" value="one"> 第一列
<input type="radio" v-model="newInfo.option" value="one"> 第二列

正确的单选按钮写法 #

确保每个单选按钮的value分别是'one'和'two'，且v-model严格绑定到newInfo.option：

<input type="radio" id="col1" v-model="newInfo.option" value="one" name="column-option">
<label for="col1">显示到第一列</label>

<input type="radio" id="col2" v-model="newInfo.option" value="two" name="column-option">
<label for="col2">显示到第二列</label>

额外提醒：给单选按钮加相同的name属性可以确保原生互斥行为，虽然Vue的v-model会处理，但加上更稳妥。

2. 检查模板中列的渲染判断逻辑 #

这是最可能出错的地方——你是不是把第二列的判断条件写反了？

错误示例（判断条件颠倒） #

比如第二列的判断写成了item.option === 'one'，那选col2时自然会显示到第一列：

<!-- 错误：第二列的判断条件反了 -->
<div class="col2">
  <div v-for="item in info" v-if="item.option === 'one'">{{ item.text }}</div>
</div>

正确的列渲染写法 #

确保第一列对应'one'，第二列对应'two'，同时注意v-for和v-if的顺序（Vue官方建议v-for在外层，避免重复渲染）：

<div class="columns-container">
  <!-- 第一列 -->
  <div class="column col1">
    <h3>第一列内容</h3>
    <div 
      v-for="(item, index) in info" 
      :key="index" 
      v-if="item.option === 'one'"
    >
      {{ item.text }}
    </div>
  </div>

  <!-- 第二列 -->
  <div class="column col2">
    <h3>第二列内容</h3>
    <div 
      v-for="(item, index) in info" 
      :key="index" 
      v-if="item.option === 'two'"
    >
      {{ item.text }}
    </div>
  </div>
</div>

3. 最后确认提交方法的拷贝逻辑 #

虽然你说数据已经正确推送，但还是要确认提交时有没有正确拷贝newInfo的属性——如果直接push引用，后续修改newInfo可能影响已提交的数据，但你的情况是显示异常，这个概率低，但可以排查：

正确的提交方法 #

用扩展运算符拷贝对象，避免引用问题：

methods: {
  submitText() {
    // 先打印确认option值是否正确，方便调试
    console.log('当前选中的option:', this.newInfo.option);
    // 拷贝对象，避免后续修改newInfo影响数组里的项
    this.info.push({ ...this.newInfo });
    // 重置表单
    this.newInfo = { text: '', option: 'one' };
  }
}

快速排查小技巧 #

在模板里临时添加调试内容，直接显示每个item的option值，确认判断逻辑是否匹配：

<!-- 临时调试用，确认每个item的option -->
<div v-for="item in info">
  文本：{{ item.text }} | 对应列：{{ item.option }}
</div>

如果这里显示的option是对的，但还是显示错列，那100%是列的v-if判断条件写错了。

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