Question

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

我有两个单选按钮，它们应该传递值＆＃39;一个＆＃39;或者＆＃39;两个＆＃39;到newInfo.option在submnit上，一个方法将表单数据推送到数组＆＃39; info＆＃39;。

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

这些数据正被推送到数组＆＃39; info＆＃39;正确，我可以迭代它。我知道这是有效的，因为我可以遍历数组，一个console.log中的所有数据。所有提交的表格数据都在那里。

接下来，我在模板中迭代这个数组两次。一次为info.col ===＆＃34;一个＆＃34;而另一次迭代只应在info.col ===＆＃34; two＆＃34;时显示。我正在使用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 here

它正在gh-pages here

上运行

Answer 1

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

这里有工作fiddle

Answer 2

如果!

，请从第二个删除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>

Answer 3

<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>

Answer 4

您的第二张支票为!item.col==='two'，只有在不等于'2'时才会显示。

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

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

Answer 5

不建议在同一元素上使用v-if和v-for！

Answer 6

<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;
   }
}

Answer 7

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

原始示例

原始循环

<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>'
})

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

7 个答案: