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>

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