如何修复 Vue 2 + UIKit 自动完成模板？

【问题标题】：How to fix Vue 2 + UIKit autocomplete template?如何修复 Vue 2 + UIKit 自动完成模板？
【发布时间】：2017-01-27 15:49:29
【问题描述】：

我遇到了 Vue 2 + UIKit 自动完成的问题。

UIKit 自动补全模板如下代码

<script type="text/autocomplete" v-pre>
    <ul class="uk-nav uk-nav-autocomplete uk-autocomplete-results">
        {{~items}}
            <li data-value="{{ $item.name }}">
                <a>{{ $item.name }}[{{$item.id}}]</a>
            </li>
        {{/items}}
    </ul>
</script>

但 Vue 2 似乎删除了 script 标签内的所有标签。

那么，我该如何解决这个问题？

【问题讨论】：

标签： javascript vue.js vuejs2 getuikit

【解决方案1】：

那是因为你的<script> 标签不会被解析如果你把它放在template 里面。这就是 vue-loader 与单文件组件一起工作的方式。 vue-loader 中的模板引擎仅用于将模板语法转换为纯 HTML。

<template>
  <div class="hello">
     <script type="text/javascript">      
        console.log("This will not be parsed")
     </script>
  </div>
</template>

<script>
export default {
  name: 'hello'
}
</script>

所以更好的处理方法是使用自定义组件。幸运的是 here 是 Vue 的自动完成组件。

【讨论】：