Javascript code isn't working with vuejs integration

Multi tool use
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
add a comment |
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
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
add a comment |
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
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
laravel vue.js
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
add a comment |
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
add a comment |
1 Answer
1
active
oldest
votes
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.
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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.
add a comment |
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.
add a comment |
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.
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.
answered Dec 28 '18 at 22:01
ceejayozceejayoz
141k34215300
141k34215300
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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