相关疑难解决方法(0)

表单用于提交文本，两个选项告诉vue在其中显示文本。选中col2单选按钮时，提交的文本应显示在第2列中。这没有发生，而是在第1列上显示了文本。

我有两个单选按钮，应将值“ one”或“ two”传递给newInfo.option。在子方法上，一个方法将表单数据推入数组“ 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记录其中的所有数据。所有提交的表单数据都在那里。

接下来，我在模板中两次遍历此数组。一次为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-网页运行这里