Vue.js 什么时候不会渲染 <input>？

Question

我在大部分（业余）前端开发中都使用 Vue.js，但我遇到了一个我无法理解的简单案例。

在下面的代码中，搜索框的内容（<input>）被转换为一个数组，然后对其进行迭代以创建一些链接（<a>）：

var vm = new Vue({
  el: "#search",
  data: {
    search: '',
    results: []
  },
  watch: {
    search: function() {
      this.results = this.search.split('')
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<h2>a dropdown</h2>

<div class="dropdown" id="search">
  <input type="text" v-model="search">
  <div id="myDropdown" class="dropdown-content">
    <a :href="#e" v-for="e in results">{{e}}</a>
  </div>
</div>

为什么不显示<input>？

注意 1：在 Chrome 中检查代码时，我看到了

<h2>a dropdown</h2>
<!---->

而这样的注释通常表明 Vue.js 没有明确渲染某些东西。

注 2： 刷新页面时，我看到输入字段非常简短，因此它被渲染，然后被（我假设）Vue.js 隐藏。

Answer 1

如果您正确绑定href 属性，如:href="'#' + e"，它就可以工作。 Vue.js 似乎对此感到困惑。