v-for 和 v-if 在 vue.js 中不能一起工作 [英] v-for and v-if not working together in vue.js

问题描述

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

我有两个单选按钮，它们应该将值 'one' 或 'two' 传递给 newInfo.option 在 submnit 上，一个方法将表单数据推送到数组 'info'.

<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://vuejs.org/v2/guide/conditional.html#v-if-with-v-for

<div class="col-md-6"><ol><li v-for="信息中的项目" v-if="item.col==='one'">文本:{{ item.text }}，col:{{ item.col }}</ol>
<div class="col-md-6"><ol><li v-for="信息中的项目" v-if="!item.col==='two'">文本:{{ item.text }}，col:{{ item.col }}</ol>

完整的 vue.js 代码在 github 这里

它在 gh-pages 这里

上运行

解决方案

为什么不使用 计算属性 ?

计算:{信息一:函数(){返回 this.info.filter(i => i.col === 'one')},信息二:函数(){返回 this.info.filter(i => i.col === '二')}}

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

<li v-for="infoOne 中的项目">{{item}}</li></ol>

这里是工作 fiddle

A form is used to submit text and two options which tell vue which column to display the text in. When the col2 radio button is checked the submitted text should display in column 2. This is not happening, on column 1 text is displaying.

I have two radio buttons which should pass the value 'one' or 'two' to a newInfo.option On submnit a method pushed the form data to the array 'info'.

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

This data is being pushed to the array 'info' correctly and I can iterate through it. I know this is working because I can iterate through the array, an console.log all the data in it. All the submitted form data is there.

Next I iterate through this array twice in the template. Once for info.col==="one" and the other iteration should only display when info.col==="two". I am using a v-for and v-if together, which the vue.js documentation says is ok to do,

https://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>

The full vue.js code is on github here

And it is running on gh-pages here

解决方案

Why don't use the power of Computed Properties ?

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

Then on each list just iterate over its respective property without the need to check. Example

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

Here the working fiddle

这篇关于v-for 和 v-if 在 vue.js 中不能一起工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！