javascript - 如何修复 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 的自动完成组件。