Question

我在大多数（业余）前端开发中使用Vue.js而且我遇到了一个我无法理解的简单案例。

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

＆＃13;

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

＆＃13;

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

＆＃13;

为什么不显示<input>？

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

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

并且这样的评论通常是Vue.js明确没有呈现某些内容的标志。

注意2：刷新页面时，我看到输入字段的一个简短的一瞥，所以它被渲染，然后由（我假设）Vue.js隐藏。

Answer 1

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

什么时候Vue.js不会呈现<input />？

1 个答案: