apply jquery plugin on vue json data
0
I'm using a vue component to fetch and show data as below:
export default {
data() {
return {
posts: ,
post: {
id: '',
title: '',
rating: '',
ver: ''
},
pagination: {},
}
},
created() {
this.fetchRecentPosts();
},
methods: {
fetchRecentPosts() {
fetch('api/recentposts')
.then(res => res.json())
.then(res => {
this.posts = res.data;
})
}
},
}
I'm also using rateYo plugin to show posts rating.
without using vue.js i'm able to turn my div attribute into star rating by :
$(".rateYo").each(function () {
var rating = $(this).data("rating");
$(this).rateYo({
rating: rating,
starWidth: "13px",
spacing: "3px",
ratedFill: "#ffb300",
normalFill: "#d3d8e4",
readOnly: true
});
});
So, How should I apply it work on evey div inside a v-for loop using vue.js ?
Thanks
vuejs2
asked Nov 24 '18 at 11:02
Ali RezaeiAli Rezaei
207
add a comment |
0
I'm using a vue component to fetch and show data as below:
export default {
data() {
return {
posts: ,
post: {
id: '',
title: '',
rating: '',
ver: ''
},
pagination: {},
}
},
created() {
this.fetchRecentPosts();
},
methods: {
fetchRecentPosts() {
fetch('api/recentposts')
.then(res => res.json())
.then(res => {
this.posts = res.data;
})
}
},
}
I'm also using rateYo plugin to show posts rating.
without using vue.js i'm able to turn my div attribute into star rating by :
$(".rateYo").each(function () {
var rating = $(this).data("rating");
$(this).rateYo({
rating: rating,
starWidth: "13px",
spacing: "3px",
ratedFill: "#ffb300",
normalFill: "#d3d8e4",
readOnly: true
});
});
So, How should I apply it work on evey div inside a v-for loop using vue.js ?
Thanks
vuejs2
asked Nov 24 '18 at 11:02
Ali RezaeiAli Rezaei
207
add a comment |
0
0
0
I'm using a vue component to fetch and show data as below:
export default {
data() {
return {
posts: ,
post: {
id: '',
title: '',
rating: '',
ver: ''
},
pagination: {},
}
},
created() {
this.fetchRecentPosts();
},
methods: {
fetchRecentPosts() {
fetch('api/recentposts')
.then(res => res.json())
.then(res => {
this.posts = res.data;
})
}
},
}
I'm also using rateYo plugin to show posts rating.
without using vue.js i'm able to turn my div attribute into star rating by :
$(".rateYo").each(function () {
var rating = $(this).data("rating");
$(this).rateYo({
rating: rating,
starWidth: "13px",
spacing: "3px",
ratedFill: "#ffb300",
normalFill: "#d3d8e4",
readOnly: true
});
});
So, How should I apply it work on evey div inside a v-for loop using vue.js ?
Thanks
vuejs2
asked Nov 24 '18 at 11:02
Ali RezaeiAli Rezaei
207
I'm using a vue component to fetch and show data as below:
export default {
data() {
return {
posts: ,
post: {
id: '',
title: '',
rating: '',
ver: ''
},
pagination: {},
}
},
created() {
this.fetchRecentPosts();
},
methods: {
fetchRecentPosts() {
fetch('api/recentposts')
.then(res => res.json())
.then(res => {
this.posts = res.data;
})
}
},
}
I'm also using rateYo plugin to show posts rating.
without using vue.js i'm able to turn my div attribute into star rating by :
$(".rateYo").each(function () {
var rating = $(this).data("rating");
$(this).rateYo({
rating: rating,
starWidth: "13px",
spacing: "3px",
ratedFill: "#ffb300",
normalFill: "#d3d8e4",
readOnly: true
});
});
So, How should I apply it work on evey div inside a v-for loop using vue.js ?
Thanks
vuejs2
vuejs2
asked Nov 24 '18 at 11:02
Ali RezaeiAli Rezaei
207
asked Nov 24 '18 at 11:02
Ali RezaeiAli Rezaei
207
asked Nov 24 '18 at 11:02
Ali RezaeiAli Rezaei
207
asked Nov 24 '18 at 11:02
Ali RezaeiAli Rezaei
207
asked Nov 24 '18 at 11:02
Ali RezaeiAli Rezaei
207
207
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
var app = new Vue({
el: '#app',
data() {
return {
posts: [
{
id: 1,
title: 'Post One',
rating: 2.5
},
{
id: 2,
title: 'Post Two',
rating: 4.1
}
],
post: {
id: '',
title: '',
rating: '',
ver: ''
},
pagination: {},
}
},
mounted() {
$('.rateYo').each(function() {
$(this).rateYo({
rating: $(this).data('rating'),
starWidth: "13px",
spacing: "3px",
ratedFill: "#ffb300",
normalFill: "#d3d8e4",
readOnly: true
});
});
}
})<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">
<div id="app">
<div v-for="(post,index) in posts" :key="index">
<h3>{{ post.title }}</h3>
<div class="rateYo" :data-rating="post.rating"></div>
</div>
</div>answered Nov 24 '18 at 12:02
Marc NewtonMarc Newton
1,9281421
I tried to put it inside muted() before.your code is not working for me either. I tried to alert something right after$('.rateYo').each(function() {not no luck. it seems because this blocks are rendering dynamically rateYo isn't working. But it works when using inside muted() on static divs
– Ali Rezaei
Nov 24 '18 at 14:14
Finally I could make it work by adding the code insidewindow.addEventListener('load', function () {.Is it OK?
– Ali Rezaei
Nov 24 '18 at 19:47
1
There are two options, Use a watcher or use a computed method to react to data changes. You would put the code found in mounted() inside one of these two solutions. vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property If you need help understanding how you can use one of these, i will update my answer but try to figure it out first.
– Marc Newton
Nov 24 '18 at 20:00
@AliRezaei Without seeing the rest of your code, its difficult for anyone to actually give you an appropriate answer, it all depends on how you are doing your pagination., you want to execute the jQuery iteration upon the list being re-rendered.
– Marc Newton
Nov 24 '18 at 20:19
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
});
}
});
draft saved
draft discarded
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%2f53457454%2fapply-jquery-plugin-on-vue-json-data%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
var app = new Vue({
el: '#app',
data() {
return {
posts: [
{
id: 1,
title: 'Post One',
rating: 2.5
},
{
id: 2,
title: 'Post Two',
rating: 4.1
}
],
post: {
id: '',
title: '',
rating: '',
ver: ''
},
pagination: {},
}
},
mounted() {
$('.rateYo').each(function() {
$(this).rateYo({
rating: $(this).data('rating'),
starWidth: "13px",
spacing: "3px",
ratedFill: "#ffb300",
normalFill: "#d3d8e4",
readOnly: true
});
});
}
})<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">
<div id="app">
<div v-for="(post,index) in posts" :key="index">
<h3>{{ post.title }}</h3>
<div class="rateYo" :data-rating="post.rating"></div>
</div>
</div>answered Nov 24 '18 at 12:02
Marc NewtonMarc Newton
1,9281421
I tried to put it inside muted() before.your code is not working for me either. I tried to alert something right after$('.rateYo').each(function() {not no luck. it seems because this blocks are rendering dynamically rateYo isn't working. But it works when using inside muted() on static divs
– Ali Rezaei
Nov 24 '18 at 14:14
Finally I could make it work by adding the code insidewindow.addEventListener('load', function () {.Is it OK?
– Ali Rezaei
Nov 24 '18 at 19:47
1
There are two options, Use a watcher or use a computed method to react to data changes. You would put the code found in mounted() inside one of these two solutions. vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property If you need help understanding how you can use one of these, i will update my answer but try to figure it out first.
– Marc Newton
Nov 24 '18 at 20:00
@AliRezaei Without seeing the rest of your code, its difficult for anyone to actually give you an appropriate answer, it all depends on how you are doing your pagination., you want to execute the jQuery iteration upon the list being re-rendered.
– Marc Newton
Nov 24 '18 at 20:19
add a comment |
1
var app = new Vue({
el: '#app',
data() {
return {
posts: [
{
id: 1,
title: 'Post One',
rating: 2.5
},
{
id: 2,
title: 'Post Two',
rating: 4.1
}
],
post: {
id: '',
title: '',
rating: '',
ver: ''
},
pagination: {},
}
},
mounted() {
$('.rateYo').each(function() {
$(this).rateYo({
rating: $(this).data('rating'),
starWidth: "13px",
spacing: "3px",
ratedFill: "#ffb300",
normalFill: "#d3d8e4",
readOnly: true
});
});
}
})<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">
<div id="app">
<div v-for="(post,index) in posts" :key="index">
<h3>{{ post.title }}</h3>
<div class="rateYo" :data-rating="post.rating"></div>
</div>
</div>answered Nov 24 '18 at 12:02
Marc NewtonMarc Newton
1,9281421
I tried to put it inside muted() before.your code is not working for me either. I tried to alert something right after$('.rateYo').each(function() {not no luck. it seems because this blocks are rendering dynamically rateYo isn't working. But it works when using inside muted() on static divs
– Ali Rezaei
Nov 24 '18 at 14:14
Finally I could make it work by adding the code insidewindow.addEventListener('load', function () {.Is it OK?
– Ali Rezaei
Nov 24 '18 at 19:47
1
There are two options, Use a watcher or use a computed method to react to data changes. You would put the code found in mounted() inside one of these two solutions. vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property If you need help understanding how you can use one of these, i will update my answer but try to figure it out first.
– Marc Newton
Nov 24 '18 at 20:00
@AliRezaei Without seeing the rest of your code, its difficult for anyone to actually give you an appropriate answer, it all depends on how you are doing your pagination., you want to execute the jQuery iteration upon the list being re-rendered.
– Marc Newton
Nov 24 '18 at 20:19
add a comment |
1
1
1
var app = new Vue({
el: '#app',
data() {
return {
posts: [
{
id: 1,
title: 'Post One',
rating: 2.5
},
{
id: 2,
title: 'Post Two',
rating: 4.1
}
],
post: {
id: '',
title: '',
rating: '',
ver: ''
},
pagination: {},
}
},
mounted() {
$('.rateYo').each(function() {
$(this).rateYo({
rating: $(this).data('rating'),
starWidth: "13px",
spacing: "3px",
ratedFill: "#ffb300",
normalFill: "#d3d8e4",
readOnly: true
});
});
}
})<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">
<div id="app">
<div v-for="(post,index) in posts" :key="index">
<h3>{{ post.title }}</h3>
<div class="rateYo" :data-rating="post.rating"></div>
</div>
</div>answered Nov 24 '18 at 12:02
Marc NewtonMarc Newton
1,9281421
var app = new Vue({
el: '#app',
data() {
return {
posts: [
{
id: 1,
title: 'Post One',
rating: 2.5
},
{
id: 2,
title: 'Post Two',
rating: 4.1
}
],
post: {
id: '',
title: '',
rating: '',
ver: ''
},
pagination: {},
}
},
mounted() {
$('.rateYo').each(function() {
$(this).rateYo({
rating: $(this).data('rating'),
starWidth: "13px",
spacing: "3px",
ratedFill: "#ffb300",
normalFill: "#d3d8e4",
readOnly: true
});
});
}
})<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">
<div id="app">
<div v-for="(post,index) in posts" :key="index">
<h3>{{ post.title }}</h3>
<div class="rateYo" :data-rating="post.rating"></div>
</div>
</div>var app = new Vue({
el: '#app',
data() {
return {
posts: [
{
id: 1,
title: 'Post One',
rating: 2.5
},
{
id: 2,
title: 'Post Two',
rating: 4.1
}
],
post: {
id: '',
title: '',
rating: '',
ver: ''
},
pagination: {},
}
},
mounted() {
$('.rateYo').each(function() {
$(this).rateYo({
rating: $(this).data('rating'),
starWidth: "13px",
spacing: "3px",
ratedFill: "#ffb300",
normalFill: "#d3d8e4",
readOnly: true
});
});
}
})<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">
<div id="app">
<div v-for="(post,index) in posts" :key="index">
<h3>{{ post.title }}</h3>
<div class="rateYo" :data-rating="post.rating"></div>
</div>
</div>var app = new Vue({
el: '#app',
data() {
return {
posts: [
{
id: 1,
title: 'Post One',
rating: 2.5
},
{
id: 2,
title: 'Post Two',
rating: 4.1
}
],
post: {
id: '',
title: '',
rating: '',
ver: ''
},
pagination: {},
}
},
mounted() {
$('.rateYo').each(function() {
$(this).rateYo({
rating: $(this).data('rating'),
starWidth: "13px",
spacing: "3px",
ratedFill: "#ffb300",
normalFill: "#d3d8e4",
readOnly: true
});
});
}
})<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">
<div id="app">
<div v-for="(post,index) in posts" :key="index">
<h3>{{ post.title }}</h3>
<div class="rateYo" :data-rating="post.rating"></div>
</div>
</div>answered Nov 24 '18 at 12:02
Marc NewtonMarc Newton
1,9281421
answered Nov 24 '18 at 12:02
Marc NewtonMarc Newton
1,9281421
answered Nov 24 '18 at 12:02
Marc NewtonMarc Newton
1,9281421
answered Nov 24 '18 at 12:02
Marc NewtonMarc Newton
1,9281421
1,9281421
I tried to put it inside muted() before.your code is not working for me either. I tried to alert something right after$('.rateYo').each(function() {not no luck. it seems because this blocks are rendering dynamically rateYo isn't working. But it works when using inside muted() on static divs
– Ali Rezaei
Nov 24 '18 at 14:14
Finally I could make it work by adding the code insidewindow.addEventListener('load', function () {.Is it OK?
– Ali Rezaei
Nov 24 '18 at 19:47
1
There are two options, Use a watcher or use a computed method to react to data changes. You would put the code found in mounted() inside one of these two solutions. vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property If you need help understanding how you can use one of these, i will update my answer but try to figure it out first.
– Marc Newton
Nov 24 '18 at 20:00
@AliRezaei Without seeing the rest of your code, its difficult for anyone to actually give you an appropriate answer, it all depends on how you are doing your pagination., you want to execute the jQuery iteration upon the list being re-rendered.
– Marc Newton
Nov 24 '18 at 20:19
add a comment |
I tried to put it inside muted() before.your code is not working for me either. I tried to alert something right after$('.rateYo').each(function() {not no luck. it seems because this blocks are rendering dynamically rateYo isn't working. But it works when using inside muted() on static divs
– Ali Rezaei
Nov 24 '18 at 14:14
Finally I could make it work by adding the code insidewindow.addEventListener('load', function () {.Is it OK?
– Ali Rezaei
Nov 24 '18 at 19:47
1
There are two options, Use a watcher or use a computed method to react to data changes. You would put the code found in mounted() inside one of these two solutions. vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property If you need help understanding how you can use one of these, i will update my answer but try to figure it out first.
– Marc Newton
Nov 24 '18 at 20:00
@AliRezaei Without seeing the rest of your code, its difficult for anyone to actually give you an appropriate answer, it all depends on how you are doing your pagination., you want to execute the jQuery iteration upon the list being re-rendered.
– Marc Newton
Nov 24 '18 at 20:19
I tried to put it inside muted() before.your code is not working for me either. I tried to alert something right after
$('.rateYo').each(function() { not no luck. it seems because this blocks are rendering dynamically rateYo isn't working. But it works when using inside muted() on static divs– Ali Rezaei
Nov 24 '18 at 14:14
I tried to put it inside muted() before.your code is not working for me either. I tried to alert something right after
$('.rateYo').each(function() { not no luck. it seems because this blocks are rendering dynamically rateYo isn't working. But it works when using inside muted() on static divs– Ali Rezaei
Nov 24 '18 at 14:14
Finally I could make it work by adding the code inside
window.addEventListener('load', function () { .Is it OK?– Ali Rezaei
Nov 24 '18 at 19:47
Finally I could make it work by adding the code inside
window.addEventListener('load', function () { .Is it OK?– Ali Rezaei
Nov 24 '18 at 19:47
1
1
There are two options, Use a watcher or use a computed method to react to data changes. You would put the code found in mounted() inside one of these two solutions. vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property If you need help understanding how you can use one of these, i will update my answer but try to figure it out first.
– Marc Newton
Nov 24 '18 at 20:00
There are two options, Use a watcher or use a computed method to react to data changes. You would put the code found in mounted() inside one of these two solutions. vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property If you need help understanding how you can use one of these, i will update my answer but try to figure it out first.
– Marc Newton
Nov 24 '18 at 20:00
@AliRezaei Without seeing the rest of your code, its difficult for anyone to actually give you an appropriate answer, it all depends on how you are doing your pagination., you want to execute the jQuery iteration upon the list being re-rendered.
– Marc Newton
Nov 24 '18 at 20:19
@AliRezaei Without seeing the rest of your code, its difficult for anyone to actually give you an appropriate answer, it all depends on how you are doing your pagination., you want to execute the jQuery iteration upon the list being re-rendered.
– Marc Newton
Nov 24 '18 at 20:19
add a comment |
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
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%2f53457454%2fapply-jquery-plugin-on-vue-json-data%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
