vue.js：select单选框选中问题

Question

在使用vue.js做项目过程中遇到一个很奇怪的问题：

<select class="form-control" v-model="editMsg.defaultSoureDB">
    <option v-for="db in editProSourceDB" :value="db">{{db}}</option>
</select>

<select class="form-control" v-model="editMsg.defaultSoureDB">
    <template v-for="db in editProSourceDB">
        <option  :value="db">{{db}}</option>
    </template>
</select>

上面两种遍历的方法不一样，表现的出来的结果都不一样，第一种直接在option标签内v-for遍历是有默认选中值为editMsg.defaultSoureDB，但是第二种却不显示，效果如图

过程：

点击编辑按钮，把编辑的数据id进行ajax查询到要编辑的该项，然后再把对应的项显示在对应的框中。

自己有进行普通环境中使用option和template两种情况下遍历数据然后v-model选中，但是两种方式并无差异都可以选中v-model绑定的值。jsfiddle链接：https://jsfiddle.net/DodoMons...

可是为什么现在在项目过程却表现不一呢？求高手指点

Answer 1

Vue 的模板是 DOM 模板，使用浏览器原生的解析器而不是自己实现一个。相比字符串模板，DOM 模板有一些好处，但是也有问题，它必须是有效的 HTML 片段。一些 HTML 元素对什么元素可以放在它里面有限制。常见的限制：

a 不能包含其它的交互元素（如按钮，链接）
ul 和 ol 只能直接包含 li
select 只能包含 option 和 optgroup
table 只能直接包含 thead, tbody, tfoot, tr, caption, col, colgroup
tr 只能直接包含 th 和 td

直接上开发文档