Question

谁能告诉我这段代码有什么问题？我从该站点复制了纯HTML。窗口大小调整因语法错误而突出显示为红色；我不知道为什么请帮助我解决此问题……仍然是Vue.js的初学者。一直在学习Vue的生命周期，但仍无济于事http://www.runningcoder.org/jquerytypeahead/demo/进入gamev2

<template>
  <div id="about">
    <div id="nav">
        <ul class="nav-atas">
        <li class="li nav-atas col-md-6"><a href="/">Home</a></li>
        <li class="li nav-atas col-md-6"><a class="active" href="/jobs">Jobs</a></li>
        </ul>
    </div>
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb helo">
      <li class="breadcrumb-item"><a style="color:red" href="#">Tokodistributor Career</a></li>
      <li class="breadcrumb-item" aria-current="page">Jobs</li>
      </ol>
    </nav>
    <div class="titel">
      <h1>Find Your Dream Jobs Here at Tokodistributor</h1>
    </div>
    <div class="container">
      <div class="row">
            <form id="form-game_v2" name="form-game_v2">
              <div class="typeahead__container">
                  <div class="typeahead__field">
                      <div class="typeahead__query">
                          <input class="js-typeahead-game_v2" name="game_v2[query]" type="search" placeholder="Search" autocomplete="off">
                      </div>
                      <div class="typeahead__button">
                          <button type="submit">
                              <i class="typeahead__search-icon"></i>
                          </button>
                      </div>
                  </div>
              </div>
          </form>
          <div class="tombolsearch col-md-4">
              <button class="btn btn-danger">
              Search
              </button>
              <button class="btn btn-success">
              View All Jobs
              </button>
          </div>
          <div class="container kerja">
            <h1>Bagaimana Cara Kerja Tokodistributor????</h1>
            <br>  
            <h4>Di Tokodistributor Kami Melayani Supplier,Pembeli Dan Pedagang dari segala penjuru Indonesia</h4>
            <br>
            <img id="gambar1" src="../assets/image/howitworks.png"/>
            </div>
      </div>
  </div>
</div>
</template>
<script>
require('@/assets/v2/scss/styles.scss')
require('@/assets/v2/scss/Jobs.scss')
require('@/assets/js/cobacoba.js')
export default{
window.onresize = function(event) {
    if ($('#form-game_v2').find('> .typeahead__container.backdrop')) {
        $('#form-game_v2').find('.typeahead__list').css('max-height', $(window).height() - 200 + "px")
    }
} 
$.typeahead({
    input: '.js-typeahead-game_v2',
    minLength: 1,
    maxItem: false,
    highlight: false,
    hint: true,
    group: true,
    maxItemPerGroup: 16,
    backdrop: {
        "background-color": "#fff"
    },
    backdropOnFocus: true,
    cache: "sessionStorage",
    compression: true,
    cancelButton: false,
    template: function () {
      return '<span class="ui blue small label">{{display}}</span>';
    },
    source: {
        game: {
            href: "http://www.gamer-hub.com/game/{{id}}/{{display|slugify}}/",
            template: function (query, item) {
                return '<img src="http://cdn.gamer-hub.com/images/' + this.helper.slugify.call(this, item.display) + '.jpg">' +
                    '<span class="title">{{display}}</span>';
            },
            ajax: {
                url: "http://www.gamer-hub.com/game/list.json",
                dataType: "jsonp",
                path: "data"
            }
        },
        tag: {
            href: "http://www.gamer-hub.com/tag/{{id}}/{{display|slugify}}/",
            ajax: {
                url: "http://www.gamer-hub.com/tag/list.json",
                dataType: "jsonp",
                path: "data"
            }
        },
        category: {
            href: "http://www.gamer-hub.com/category/{{id}}/{{display|slugify}}/",
            ajax: {
                url: "http://www.gamer-hub.com/category/list.json",
                dataType: "jsonp",
                path: "data"
            }
        }
    },
    callback: {
        onShowLayout: function (node, query) {
            node.attr('placeholder', 'Search for a Game ...');
            node.closest('form').find('.typeahead__list').css('max-height', $(window).height() - 200 + "px");
        },
        onHideLayout: function (node, query) {
            node.attr('placeholder', 'Search');
        },
        onLayoutBuiltBefore: function (node, query, result, resultHtmlList) {
            resultHtmlList.find('li[data-search-group="game"]').remove();
            return resultHtmlList;
        },
        onClickAfter: function (node, a, item, event) {

            event.preventDefault();

            var r = confirm("You will be redirected to:\n" + item.href + "\n\nContinue?");
            if (r == true) {
                window.open(item.href);
            }

        }
    }
})
}
</script>

<style>

</style>

Answer 1

这里的问题与您的window.resize无关。与export一起使用。您是说要导出对象，但不提供对象。

因此，您希望将代码放置在导出之外，而只将您实际希望在其他地方使用的内容放到导出中。

更多有关出口的信息：https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

Vue上的Window.resize无法编译

1 个答案: