применить плагин jquery к данным vue json

Question

Я использую компонент vue для получения и отображения данных, как показано ниже:

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;
            })
        }
    },
}

Я также использую плагин rateYo для отображения рейтинга сообщений.без использования vue.js я могу превратить свой атрибут div в звездный рейтинг:

$(".rateYo").each(function () {
  var rating = $(this).data("rating");
  $(this).rateYo({
      rating: rating,
      starWidth: "13px",
      spacing: "3px",
      ratedFill: "#ffb300",
      normalFill: "#d3d8e4",
      readOnly: true
  });
});

Итак, как мне применить его для работы с evey div внутри цикла v-for с использованием vue.js?

Спасибо

Answer 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>