katsumasa0514
@katsumasa0514 (ASAP k)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

djangoでvueのvue-star-ratingを実装

参考サイトを元に作業を行っているのですが、ブラウザに表示させたところ、星が表示されませんでした。

html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h2>basic</h2>
        <star-rating v-model="rating"></star-rating>
    </div>
    <script src="https://unpkg.com/vue-star-rating/dist/star-rating.min.js"></script>

    <script>
        const StarRating = window.VueStarRating.default;
        Vue.component('star-rating', StarRating);

        let app = new Vue({
            el: '#app',
            data: {
                rating: 0
            }
        });
    </script>
</body>

</html>

vueを学習し出して間もないので至らない点が多々あると思いますが、よろしくお願いします。

0

1Answer

記載のhttps://unpkg.com/vue-star-rating/dist/star-rating.min.js にアクセスすると以下の表示が出るため、参考にされた記事の公開後に CDN の URL が変更された可能性が高いです。

Cannot find "/dist/star-rating.min.js" in vue-star-rating@1.7.0

必要な Vue プラグインが読み込めていないので動作しないのだと思いますが、この場合少なくとも以下の行でエラーが出ているはずなので開発ツールのコンソールに表示が無いかも確認してください。

const StarRating = window.VueStarRating.default;
// CDN が読み込めていないと winodow.VueStarRating が undefined になるので
// "Cannot read property 'default' of undefined" のエラーが出るはず

記事と同じv1.7.0のjsファイルが下記URLから取得できるのでsrc 属性値を置き換えて試してみてください。

https://unpkg.com/vue-star-rating@1.7.0/dist/VueStarRating.umd.min.js

0Like

Comments

  1. @katsumasa0514

    Questioner

    回答ありがとうございます。

    コンソールを確認したところ、言われた通り"Cannot read property 'default' of undefined"が出ていました。URLを変更したところそのエラーは消えました。
    しかし、もう一つエラーが出てきました。
    エラー(”review:75 Uncaught ReferenceError: Vue is not defined
    at review:75”)
    調べたところthisがどこかで抜け落ちているのかと思うのですが、場所が分からず困っています。
    ご存知でしたら回答いただけると幸いです。
  2. 投稿文中の HTML をよくよく見ると vue-star-rating プラグインだけで本体の Vue.js を読み込んでいませんね。

    "Vue is not defined" は Vue 変数が存在しないのに Vue.component() を実行しようとしたために発生したエラーです(言い換えると Vue.js を読み込めば勝手に define してくれていたはずの変数です)。

    同じくCDNなどで vue.js が取得できる URL を確認し、<script src=""> タグを設置すれば動作すると思います。この辺りはせっかくなのでご自身で調べてみてください。
  3. @katsumasa0514

    Questioner

    データを読み込み思い通りに動きました!
    ありがとうございます!

Your answer might help someone💌