如何修复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>

因此,更好的方法是使用自定义组件.幸运的是,这是Vue的自动完成组件.