Script simplu convertit cu VueJS

Limbaje de Programare Frontend
1

Salut, folosesc acest pachet pt comentarii: http://docs.hazzardweb.com/laravel-comments/2.0/usage

Comentariile se afiseaza, dar in alt loc am facut o componenta .VUE unde am mai multe lucruri, aveti idee cum as putea converti sau face scriptul de mai jos sa functioneze si in componenta Vue?

1

<script>
    new Comments.default({
        el: '#my-comments',
        pageId: "{{$content->id}}",
        commentableType: 'Course-Blade'
    })
</script>

Comentariile le afisez prin simplu: <div id="my-comments"></div> in .blade unde functioneaza ok, la fel ar trebui sa fie si in .Vue cred.
Dar nu stiu in .Vue cum as putea face cu scriptul de mai sus…

2 
<template>
  <div id="my-comments"></div>
</template>

<script>
export default {
  mounted() {
    new Comments.default({
        el: '#my-comments',
        pageId: state.content.id, // a global state object
        commentableType: 'Course-Blade'
    })
  }
}
</script>

Pagina care iti incarca codul de .vue trebuie sa injecteze valorile de care ai nevoie in .vue.

// page.blade
<script>
var state = {
  content: {
    id: "{{$content->id}}", // inject from server
  },
}
</script>
1 Like
3

Multumesc mult, o sa incerc.

Imi spun “Comments is not defined”, ideea este ca in .blade eu am si <script src="{{ mix('comments.js', 'vendor/comments') }}"></script>, scriptul este in .blade-ul unde incarc componenta .vue, dar nu-l detecteaza… sau poate il pot pune in alt fel in componenta .VUE.

Am 2 script-uri prin care pot incarca .js-ul:

{{-- <script src="/vendor/comments/comments.js"></script> --}}
<script src="{{ mix('comments.js', 'vendor/comments') }}"></script>

Am incercat cu import Comments from './../../comments';, se importa, dar primesc alta eroare cand pun

new Comments.default({
        el: '#my-comments',
        pageId: 21,
        commentableType: 'Course-Blade'
    })
``` in .MOUNTED.

Imagine eroare: https://i.imgur.com/mB82ZId.png
4

Incearca new Comments({ in loc de new Comments.default({.

import Comments from './../../comments'; <- in situatia asta Comments este default.