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

Question

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

我有两个单选按钮，它们应该将值“一”或“二”传递给 newInfo.option 在 submnit 上，一个方法将表单数据推送到数组“信息”。

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

该数据被正确推送到数组“信息”，我可以遍历它。我知道这是有效的，因为我可以遍历数组，console.log 中的所有数据。所有提交的表单数据都在那里。

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

https://v2.vuejs.org/v2/guide/conditional.html#v-if-with-v-for

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

完整的 vue.js 代码在 github 上

它在 这里 的 gh-pages 上运行

原文由 Shane G 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您还可以在模板中使用 JavaScript 来过滤 v-for 的数组元素。而不是 v-for="item in infos" 您可以将信息数组缩小到 v-for="item in infos.filter(info => info.col === 'one')" 。

由于在回调中使用了 info，我将您的 info-array 重命名为 infos 以提高我的建议的可读性。

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

原文由 inTheFlow 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

为什么不使用 Computed Properties 的强大功能？

 computed: {
  infoOne: function () {
    return this.info.filter(i => i.col === 'one')
  },
  infoTwo: function () {
    return this.info.filter(i => i.col === 'two')
  }
}

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

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

这里的工作 小提琴

原文由 DobleL 发布，翻译遵循 CC BY-SA 4.0 许可协议