Блог

Главная - Вопросы по программированию - Как заставить Sheety.co работать внутри Vue.js компонент

Как заставить Sheety.co работать внутри Vue.js компонент

#vue.js #handlebars.js

#vue.js #handlebars.js

Вопрос:

Sheety API великолепен, но я не могу заставить его работать с Vue.

Единственный включенный пример использует jQuery с handlebars.js который, как vue.js использует синтаксис double mustache, который сталкивается.

 <html>
<head>
<title>UK Theme Parks</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $.getJSON('https://api.sheety.co/uk-theme-parks', function(data) {
        var template = Handlebars.compile($('#item-template').html())
        $('#items').html(template(data))
    })
})
</script>
<script id="item-template" type="text/x-handlebars-template">
<ul>
    {{#each this}}
        <li><a href="{{website}}">{{name}}</a></li>
    {{/each}}
</ul>
</script>
</head>
<body>
<div id="items">Loading theme parks...</div>
</body>
</html>

Есть ли способ заставить этот пример работать внутри компонента Vue? Наиболее предпочтительно, чтобы заставить его работать без необходимости импортировать handlebars.js или jQuery?

Пожалуйста, имейте в виду, что я дизайнер-исследователь, а не хорошо разбирающийся в js-кодере, поэтому я был бы очень признателен за рабочий пример 🙂