@katsumasa0514 (ASAP k)posted at 2021-01-21

djangoでvueのvue-star-ratingを実装し保存

Q&A

Closed

解決したいこと

djangoでアプリを作成しています。
その中でvueのvue-star-ratingを導入し表示に成功しました。
しかし、取得したデータ（評価数）を保存する方法がわかりません。

vue

<body>

    <div class="main">
        <div class="container">
            <h1>{{title}}</h1>
            <div id="app">
                <h2>評価</h2>
                <!--ここのstar-ratingで表示-->
                <star-rating :increment="0.5" :star-size="35"></star-rating>
            </div>
            <table>
                <form action="{% url 'review' movie %}" method="post">
                    {% csrf_token %}
                    {{form}}
                    <tr>
                        <td></td>
                        <td><input type="submit" value="送信"></td>
                    </tr>
                </form>
            </table>
        </div>
    </div>


    <script>
        Vue.component('star-rating', VueStarRating.default)

        new Vue({
            el: '#app',
            methods: {
                setRating: function (rating) {
                    this.rating = "You have Selected: " + rating + " stars";
                },
                showCurrentRating: function (rating) {
                    this.currentRating = (rating === 0) ? this.currentSelectedRating : "Click to select " + rating + " stars"
                },
                setCurrentSelectedRating: function (rating) {
                    this.currentSelectedRating = "You have Selected: " + rating + " stars";
                }

            },
            data: {
                rating: "No Rating Selected",
                currentRating: "No Rating",
                currentSelectedRating: "No Current Rating",
                boundRating: 3,
            }
        });
    </script>
</body>

今回のstar-rating以外のデータ（formの入力値）はpythonでpostを受け取った際に保存されるようになっています。
ですので、star-ratingで得たデータ（評価数）も合わせてpythonの方にpost送信したいと思っていますが、そもそもデータがどこにあるのかわかりません。

python

@login_required(login_url='/movieist/accounts/login/')
def review(request, movie_id):
    res = api.get_movie(movie_id)
    title = res['title']

    if (request.method == 'POST'):
        obj = Review()
        form = ReviewForm(request.POST, instance=obj)
        if form.is_valid():
            review = form.save(commit=False)
            review.owner = request.user
            review.movie_id = movie_id
            review.save()
        return redirect(to='/movieist/movieselect')
    params = {
        'form': ReviewForm(),
        'title': title,
        'movie': movie_id
    }

    return render(request, 'movieist/review.vue', params)

＜表示画面＞

表示画面の３の部分を保存したいです。
至らないところも多々あるかと思いますがよろしくお願いします。

1Answer

@mogamoga1337 posted at 2021-01-21

動作確認のためにinputのtypeをtextにしてるけど利用するときはhiddenにしてね

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-star-rating/dist/VueStarRating.umd.min.js"></script>
</head>
<body>
    <div id="app" class="main">
        <div class="container">
            <h1>ちくわぶ</h1>
            <div>
                <h2>評価</h2>
                <!--ここのstar-ratingで表示-->
                <star-rating :increment="0.5" :star-size="35" v-model="boundRating"></star-rating>
            </div>
            <form method="post">
                <input type="text" name="star" :value="boundRating">
                <input type="submit" value="送信">
            </form>
        </div>
    </div>


    <script>
    Vue.component('star-rating', VueStarRating.default)

    new Vue({
        el: '#app',
        methods: {
            setRating: function (rating) {
                this.rating = "You have Selected: " + rating + " stars";
            },
            showCurrentRating: function (rating) {
                this.currentRating = (rating === 0) ? this.currentSelectedRating : "Click to select " + rating + " stars"
            },
            setCurrentSelectedRating: function (rating) {
                this.currentSelectedRating = "You have Selected: " + rating + " stars";
            }

        },
        data: {
            rating: "No Rating Selected",
            currentRating: "No Rating",
            currentSelectedRating: "No Current Rating",
            boundRating: 3,
        }
    });
    </script>
</body>

</html>

0Like

Comments

@katsumasa0514
Questioner
回答ありがとうございます！

変更を加えて、ブラウザで表示させたsubmitが反応しませんでした。
scriptの内容を全て削除したところ送信が出来るようになったので、変更が原因ではないとは思います。
何かが干渉してしまっているのでしょうか？
@mogamoga1337
<form method="post">
↓
<form action="{% url 'review' movie %}" method="post">
@katsumasa0514
Questioner
変更しましたがボタンを押しても変化はありませんでした。
他に何か考えられることはありますか？
@mogamoga1337
tableタグ、trタグ、tdタグが悪さをしているっぽい

F12の開発者ツールのElementsタブから確認して
入れ子になっていないと思われ
@mogamoga1337
<table><form>なんたら</form></table>
↓
<form><table>なんたら</table></form>
@katsumasa0514
Questioner
解決できました！
本当にありがとうございました！

今回の質問も自分で解決をしようとしているのですが、なかなか上手くいきません。
もし、よろしければ解決した経緯をお聞かせいただけないでしょうか？
忙しい中申し訳ありませんがよろしくお願いします。
@mogamoga1337
ChromeのDevToolsのElementsタグで見れるHTMLを確認したら
formタグの中に何も入っていなかったからHTMLのルール的にまずいんだろうなあと思いformタグを外側にしました。
ググるとtableタグ直下にformタグをかけないそうです。

https://webliker.info/46840/
tableタグ：表の定義
@katsumasa0514
Questioner
勉強になりました！
ありがとうございました！

Are you sure you want to delete the question?