Vue没有加载数据

时间:2016-04-21 21:47:55

标签: javascript jquery json coffeescript vue.js

我有一个vue / coffeescript应用程序,如下所示:

控制台中没有错误,它说它正在成功地为JSON做出外部请求,但是当我说 $(document).ready(function () { var links = [ 'swfs/#1%20(Special%20Japanese%20Extended%20Dance%20Mix).swf', 'swfs/$D6.swf', 'swfs/(MAD)%20Huh.swf' ]; var displaytext = [ '#1 (Special Japanese Extended Dance Mix)', '$D6', '(MAD) Huh' ]; var c = 0; var flashmovie, test, temp; function init() { flashmovie = document.getElementById('flashmovie'); document.getElementById('back').onclick = function () { if (c == 0) { c = links.length; } c-- displayFiles(); download(); } document.getElementById('next').onclick = function () { if (c == links.length - 1) { c = -1; } c++; displayFiles(); download(); } document.getElementById('rand').onclick = function () { temp = c; while (c == temp) { c = Math.floor(Math.random() * links.length); } displayFiles(); download(); } // Scripts for the left and right arrow key functionality document.addEventListener('keydown', function (e) { if (e.which == 37) { $("#back").click(); } }); document.addEventListener('keydown', function (e) { if (e.which === 39) { $("#next").click(); } }); } function displayFiles() { test = links[c].substring(links[c].lastIndexOf('.') + 1, links[c].length); document.getElementById('title').innerHTML = displaytext[c]; flashmovie.innerHTML = '<object type="application/x-shockwave-flash" data="' + links[c] + '">' + '<param name="movie" value="' + links[c] + '">' + '<\/object>'; } function download() { document.getElementById('downLink').setAttribute('href', links[c]); document.getElementById('downLink').setAttribute('download', displaytext[c]); } window.addEventListener ? window.addEventListener('load', init, false) : window.attachEvent('onload', init); }); 时,它只返回Test而不是来自JSON。

<body>

    <div class="titleText">
            <h1>Anon Curb</h1>
    </div>
    <div id="flashmovie" class="flashMovieSamp">
        <object type="application/x-shockwave-flash" data="swfs/welcomeflash.swf">'+
            <param name="movie" value="http://www.anon-curb.com/swfs/welcomeflash.swf">
        </object>
    </div>
    <!-- end #container -->
    <div id="buttonCon">

        <div id="buttons">
            <button id="next">next</button>

            <button id="rand">Random</button>

            <button id="back">Back</button>
        </div>

    </div>

    <div id="titleCon">
        <a href="swfs/welcomeflash.swf" class="downLink" download="welcomeflash">
            <div id="title">Hit random button</div>
        </a>
    </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>

    <script src="js/flashcollection.js"></script>
</body>

1 个答案:

答案 0 :(得分:2)

I don't know how to do it in coffeescript, but I think the issue is that this doesn't refer to Vue within the callback function, so setting this.book isn't working. Normally you can fix this using .bind(this) on the function, or setting var vm = this before the ajax call and setting vm.book in the callback.