Javascript code isn't working with vuejs integration

Multi tool use
Multi tool use












0















using Vuejs/Laravel .I use this simple javascript code to generate a chart in blade.



 <script>
function getData(columnOrder, keyName) {
var obj, table = $("#t4"), array = ;
table.find('tbody tr').each(function() {
var rows = $(this).find('td:nth-child(' + columnOrder +')');
rows.each(function(){
obj = {};
obj[keyName] = $(this).text();
array.push(obj);
});
});
return array;
}

var categories = getData(1, 'label');
var datas = getData(2, 'value');
console.log(categories);
console.log(datas);


It works when my html table contain html/php values. but when it's vuejs values, it's seems not recognizing data.. Here is my table with vuejs.



 <table class="hidden" id="t4">
<thead>
<tr>
<th scope="col">a</th>
<th scope="col">b</th>
</tr>
</thead>
<tbody>
<template v-for="person in personsWithAmount">
<tr>
<td scope="row" >@{{person.user.name}}</td>
<td scope="row">@{{person.totalAmount}}</td>
</tr>
</template>
</tbody>
</table>


Console.log still blank
Thank you in advance










share|improve this question


















  • 1





    I suspect your code is running before Vue does. You'd want to move your JS into the Vue component, so it only runs once the data etc. is all present and mounted.

    – ceejayoz
    Dec 28 '18 at 21:49











  • Oh yes, u were right ! Thank you !

    – yassine j
    Dec 28 '18 at 21:59











  • Cool - I've fleshed this out into an answer a little.

    – ceejayoz
    Dec 28 '18 at 22:01
















0















using Vuejs/Laravel .I use this simple javascript code to generate a chart in blade.



 <script>
function getData(columnOrder, keyName) {
var obj, table = $("#t4"), array = ;
table.find('tbody tr').each(function() {
var rows = $(this).find('td:nth-child(' + columnOrder +')');
rows.each(function(){
obj = {};
obj[keyName] = $(this).text();
array.push(obj);
});
});
return array;
}

var categories = getData(1, 'label');
var datas = getData(2, 'value');
console.log(categories);
console.log(datas);


It works when my html table contain html/php values. but when it's vuejs values, it's seems not recognizing data.. Here is my table with vuejs.



 <table class="hidden" id="t4">
<thead>
<tr>
<th scope="col">a</th>
<th scope="col">b</th>
</tr>
</thead>
<tbody>
<template v-for="person in personsWithAmount">
<tr>
<td scope="row" >@{{person.user.name}}</td>
<td scope="row">@{{person.totalAmount}}</td>
</tr>
</template>
</tbody>
</table>


Console.log still blank
Thank you in advance










share|improve this question


















  • 1





    I suspect your code is running before Vue does. You'd want to move your JS into the Vue component, so it only runs once the data etc. is all present and mounted.

    – ceejayoz
    Dec 28 '18 at 21:49











  • Oh yes, u were right ! Thank you !

    – yassine j
    Dec 28 '18 at 21:59











  • Cool - I've fleshed this out into an answer a little.

    – ceejayoz
    Dec 28 '18 at 22:01














0












0








0








using Vuejs/Laravel .I use this simple javascript code to generate a chart in blade.



 <script>
function getData(columnOrder, keyName) {
var obj, table = $("#t4"), array = ;
table.find('tbody tr').each(function() {
var rows = $(this).find('td:nth-child(' + columnOrder +')');
rows.each(function(){
obj = {};
obj[keyName] = $(this).text();
array.push(obj);
});
});
return array;
}

var categories = getData(1, 'label');
var datas = getData(2, 'value');
console.log(categories);
console.log(datas);


It works when my html table contain html/php values. but when it's vuejs values, it's seems not recognizing data.. Here is my table with vuejs.



 <table class="hidden" id="t4">
<thead>
<tr>
<th scope="col">a</th>
<th scope="col">b</th>
</tr>
</thead>
<tbody>
<template v-for="person in personsWithAmount">
<tr>
<td scope="row" >@{{person.user.name}}</td>
<td scope="row">@{{person.totalAmount}}</td>
</tr>
</template>
</tbody>
</table>


Console.log still blank
Thank you in advance










share|improve this question














using Vuejs/Laravel .I use this simple javascript code to generate a chart in blade.



 <script>
function getData(columnOrder, keyName) {
var obj, table = $("#t4"), array = ;
table.find('tbody tr').each(function() {
var rows = $(this).find('td:nth-child(' + columnOrder +')');
rows.each(function(){
obj = {};
obj[keyName] = $(this).text();
array.push(obj);
});
});
return array;
}

var categories = getData(1, 'label');
var datas = getData(2, 'value');
console.log(categories);
console.log(datas);


It works when my html table contain html/php values. but when it's vuejs values, it's seems not recognizing data.. Here is my table with vuejs.



 <table class="hidden" id="t4">
<thead>
<tr>
<th scope="col">a</th>
<th scope="col">b</th>
</tr>
</thead>
<tbody>
<template v-for="person in personsWithAmount">
<tr>
<td scope="row" >@{{person.user.name}}</td>
<td scope="row">@{{person.totalAmount}}</td>
</tr>
</template>
</tbody>
</table>


Console.log still blank
Thank you in advance







laravel vue.js






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Dec 28 '18 at 21:37









yassine jyassine j

848




848








  • 1





    I suspect your code is running before Vue does. You'd want to move your JS into the Vue component, so it only runs once the data etc. is all present and mounted.

    – ceejayoz
    Dec 28 '18 at 21:49











  • Oh yes, u were right ! Thank you !

    – yassine j
    Dec 28 '18 at 21:59











  • Cool - I've fleshed this out into an answer a little.

    – ceejayoz
    Dec 28 '18 at 22:01














  • 1





    I suspect your code is running before Vue does. You'd want to move your JS into the Vue component, so it only runs once the data etc. is all present and mounted.

    – ceejayoz
    Dec 28 '18 at 21:49











  • Oh yes, u were right ! Thank you !

    – yassine j
    Dec 28 '18 at 21:59











  • Cool - I've fleshed this out into an answer a little.

    – ceejayoz
    Dec 28 '18 at 22:01








1




1





I suspect your code is running before Vue does. You'd want to move your JS into the Vue component, so it only runs once the data etc. is all present and mounted.

– ceejayoz
Dec 28 '18 at 21:49





I suspect your code is running before Vue does. You'd want to move your JS into the Vue component, so it only runs once the data etc. is all present and mounted.

– ceejayoz
Dec 28 '18 at 21:49













Oh yes, u were right ! Thank you !

– yassine j
Dec 28 '18 at 21:59





Oh yes, u were right ! Thank you !

– yassine j
Dec 28 '18 at 21:59













Cool - I've fleshed this out into an answer a little.

– ceejayoz
Dec 28 '18 at 22:01





Cool - I've fleshed this out into an answer a little.

– ceejayoz
Dec 28 '18 at 22:01












1 Answer
1






active

oldest

votes


















1














You'll want to take a peek at the Vue lifecycle. In short, Vue takes a while to load and initialize, which means that JavaScript outside of Vue that relies on elements created by Vue may execute before those elements exist at all.



Generally, you're going to want to move any JS code that relies on Vue-created elements into the Vue app.






share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53964531%2fjavascript-code-isnt-working-with-vuejs-integration%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1














    You'll want to take a peek at the Vue lifecycle. In short, Vue takes a while to load and initialize, which means that JavaScript outside of Vue that relies on elements created by Vue may execute before those elements exist at all.



    Generally, you're going to want to move any JS code that relies on Vue-created elements into the Vue app.






    share|improve this answer




























      1














      You'll want to take a peek at the Vue lifecycle. In short, Vue takes a while to load and initialize, which means that JavaScript outside of Vue that relies on elements created by Vue may execute before those elements exist at all.



      Generally, you're going to want to move any JS code that relies on Vue-created elements into the Vue app.






      share|improve this answer


























        1












        1








        1







        You'll want to take a peek at the Vue lifecycle. In short, Vue takes a while to load and initialize, which means that JavaScript outside of Vue that relies on elements created by Vue may execute before those elements exist at all.



        Generally, you're going to want to move any JS code that relies on Vue-created elements into the Vue app.






        share|improve this answer













        You'll want to take a peek at the Vue lifecycle. In short, Vue takes a while to load and initialize, which means that JavaScript outside of Vue that relies on elements created by Vue may execute before those elements exist at all.



        Generally, you're going to want to move any JS code that relies on Vue-created elements into the Vue app.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Dec 28 '18 at 22:01









        ceejayozceejayoz

        141k34215300




        141k34215300






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53964531%2fjavascript-code-isnt-working-with-vuejs-integration%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            lWc6CKTqjm,1ffB5PHo4i9V1ZwbmZX lZUrEsIXNdoSEO429h
            CEb9F xoEGlSDEG,PwL5n,Vgv,zkHOtJSZ,nkZG8R6S0f0BWWKe

            Popular posts from this blog

            Monofisismo

            Angular Downloading a file using contenturl with Basic Authentication

            Olmecas