v-for和v-if在vue.js中不一起工作

一个表单用于提交文本，两个选项告诉vue要在哪个列中显示文本。选中col2单选按钮时，提交的文本应显示在第2列中。这不会发生，在第1列上显示文本

我有两个单选按钮，可以将值“one”或“two”传递给一个newInfo。submnit上的选项一个方法将表单数据推送到数组“info”

<input type="radio" id="col1" value="one" v-model="newInfo.col">
<input type="radio" id="col2" value="two" v-model="newInfo.col">

此数据正被正确地推送到数组“info”，我可以对其进行迭代。我知道这是可行的，因为我可以遍历数组，一个console.log，记录其中的所有数据。所有提交的表单数据都在那里

接下来，我在模板中迭代该数组两次。一次for info.col==“one”，另一次迭代应仅在info.col==“two”时显示。我同时使用v-for和v-if，vue.js文档中说可以这样做

文本：{{item.text}，列：{{item.col}


文本：{{item.text}，列：{{item.col}

完整的vue.js代码在github上

---

它在gh页面上运行

您的第二个检查是

！item.col==='two'

并且仅当它不等于'two'时才会显示

编辑：这个！not运算符的绑定可能比===更紧密，因此将始终返回false。添加括号以控制应用程序的顺序。我之所以说可能是因为这可能是我不熟悉的一点Vue魔力，而不是一个纯JavaScript表达式

---

我想你想去掉那个感叹号。或者让它成为

！（item.col=='one'）

显示除'one'以外的任何值。

删除

从第二个if
v-if=“item.col==“two”

这样做更好（只迭代一次）：



文本：{{item.text}，列：{{item.col}


文本：{{item.text}，列：{{item.col}

为什么不使用的权力

然后在每个列表上只需迭代其各自的属性，而无需检查。范例

<ol>
   <li v-for="item in infoOne">{{item}}</li>
</ol>


{{item}

在这里工作

方法：{
检查此（i）{
归还这个[我]；
}
},
计算：{
MyComputer属性（）{
退回这个。$store.state.something？真：假；
}
}


文本：{{item.text}，列：{{item.col}


文本：{{item.text}，列：{{item.col}

如果出于某种原因，不能选择过滤列表，则可以将同时具有
v-for
和
v-If
的元素转换为组件，并将
v-If
移入组件

原始示例

原始循环

<li v-for="item in info" v-if="item.col==='one'">
  text: {{ item.text }}, col: {{ item.col }}
</li>


文本：{{item.text}，列：{{item.col}


建议的重构

重构循环

<custom-li v-for="item in info" :visible="item.col==='one'">
  text: {{ item.text }}, col: {{ item.col }}
</custom-li>


文本：{{item.text}，列：{{item.col}

新组件

Vue.component('custom-li', {
  props: ['visible'],
  template: '<li v-if="visible"><slot/></li>'
})

Vue.component（'custom-li'{
道具：[“可见”]，
模板：'
'
})
啊！我现在明白了，谢谢，是的，你的方式只意味着重复一次。谢谢，事实上你的代码将错开行。不完全是我想要的。谢谢你的回答，也谢谢你的问题，因为我对vue很陌生，还有很多东西要学。但是谢谢，你的答案非常有趣。很高兴我帮了你。这是Vue官方风格指南的第一部分，被归类为“基本”（与“强烈推荐”、“推荐”或“谨慎使用”相对）。DobleL嘿，我非常喜欢你的答案，我已经修改了它。我在每个列表项旁边添加了“删除”按钮，所以点击按钮我会从列表中删除该索引。问题是，我们从计算属性中迭代两个列表，基本上我们有重复的索引（检查列表项的打印，您就会明白），所以它从错误的类别中删除了项。我正在考虑解决这个问题的方法，但我必须同时使用v-for和v-if，这是不推荐的。你有什么建议或解决办法吗？提前谢谢！这是我的问题，我也有同样的问题。这解释了为什么它不起作用，你应该为数组和对象做些什么用v-show代替v-if怎么样？我知道元素仍然存在，但它将被隐藏。您可以在
v-for
指令中使用Javascript。例如，myFilter（info）

中的

项。您应该对您的解决方案进行评论，以提供更多的见解，伙计：）“仅代码”回答不是很有趣：）
<div v-for="item in items">

   <div v-if="checkThis(item.computeThisProperty)" />
   <div v-else />

</div>

methods: {
   checkThis(i) {
      return this[i];
   }
},

computed: {
   myComputedProperty() {
      return this.$store.state.something ? true : false;
   }
}

<div class="row">
    <div class="col-md-6">
        <ol>
            <li v-for="item in info">
                <template v-if="item.col==='one'">
                    text: {{ item.text }}, col: {{ item.col }}
                <template>
            </li>
        </ol>
    </div>
    <div class="col-md-6">
        <ol>
            <li v-for="item in info">
                <template v-if="!item.col==='two'">
                    text: {{ item.text }}, col: {{ item.col }}
                <template>
            </li>
        </ol>
    </div>
</div>

<li v-for="item in info" v-if="item.col==='one'">
  text: {{ item.text }}, col: {{ item.col }}
</li>

<custom-li v-for="item in info" :visible="item.col==='one'">
  text: {{ item.text }}, col: {{ item.col }}
</custom-li>

Vue.component('custom-li', {
  props: ['visible'],
  template: '<li v-if="visible"><slot/></li>'
})