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

Question

我遇到了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标记内的所有标记。

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

Answer 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的自动完成组件。