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

這是因爲如果您將其放入template中，您的<script>標記將不會被解析。這就是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的自動完成組件。