29

一个表单用于提交文本，两个选项告诉 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://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 上运行

4

6 回答 6

58

为什么不使用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>

这里的工作小提琴

于 2018-02-22T18:10:39.703 回答
6 
<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>
于 2020-08-10T12:17:19.623 回答
5

!如果从第二个删除v-if="item.col==='two'"

更好的是你可以这样做（只迭代一次）：

<div class="row" v-for="item in info">
            <div class="col-md-6">
                <ol>
                    <li v-if="item.col==='one'">
                        text: {{ item.text }}, col: {{ item.col }}
                    </li>
                </ol>
            </div>
            <div class="col-md-6">
                <ol>
                    <li v-if="item.col==='two'">
                        text: {{ item.text }}, col: {{ item.col }}
                    </li>
                </ol>
            </div>
        </div>
于 2018-02-22T17:29:49.323 回答
4

如果由于某种原因，过滤列表不是一个选项，您可以将带有v-for和的元素转换v-if为组件，然后将v-ifin 移动到组件中。

原始示例

原始循环

<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>'
})
于 2020-12-03T19:53:38.527 回答
2 
<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;
   }
}
于 2020-02-15T18:22:35.100 回答
1

您的第二次检查是并且仅在不等于“二”!item.col==='two'时才会显示。

编辑：！not 运算符可能比 === 绑定得更紧密，所以它总是返回 false。添加括号以控制应用程序的顺序。我说可能是因为它可能是我不熟悉的 Vue 魔法，而不是纯 JavaScript 表达式。

我想你想删除那个感叹号。或者让它!(item.col==='one')显示除“一”以外的任何值。

于 2018-02-22T17:27:18.267 回答