Question

我正在做Aneeta Sharma撰写的《使用Vue.js和Node进行全栈Web开发》一书中的教程。我正在学习第5章，但我不了解Movie.vue组件出了什么问题。

如何复制步骤：

添加电影
点击电影以查看其单独页面
选择“为这部电影评分”

应该发生的情况：当您选择“为这部电影评分”按钮时，应该显示vue-star-rating中的评分成分。

发生了什么：什么也没显示。

此外，这本书并没有真正解释代码。我假设它在包装变量let wrapper = document.createElement('div');中存储了评级成分（由 Vue.extend 创建）。

实际上如何将其添加到Flash消息中？在main.js文件中，它使用vue-swal模块。

为此的仓库可以在这里找到：https://github.com/christopheragnus/mevn_movie_app

下面的Movie.vue代码：

     <template>
     <v-layout row wrap>
       <v-flex xs4>
         <v-card>
           <v-card-title primary-title>
             <div>
               <div class="headline">{{ movie.name }}</div>
                <span class="grey--text">{{ movie.release_year }} ‧ {{ movie.genre }}</span>
             </div>
           </v-card-title>
           <v-btn color="info" @click="rate">Rate this movie</v-btn>
           <v-card-text>
             {{ movie.description }}
           </v-card-text>
         </v-card>
       </v-flex>
     </v-layout>
   </template>

<script>
   import axios from 'axios';
   import Vue from 'vue';
   import VueStarRating from 'vue-star-rating';

    let wrapper = document.createElement('div');

    // shared state
    let state = {
        note: 0
    }

    let RatingComponent = Vue.extend({
    data() { return {rating: 0} 
    },
    watch: {
        rating (newVal) { state.note = newVal }
    },
    template: `
        <div class="rating">
            How was your experience getting help with this issues?
        <star-rating v-model="rating" :show-rating="false"></star-rating>
        </div>`,
    components: {'star-rating': VueStarRating.default}
    })

    let component = new RatingComponent().$mount(wrapper)

    export default {
        name: 'Movie',
        data() {
        return {
            movie: [], 
            };
        },
    mounted() {
        this.fetchMovie();
        },
        methods: {
            rate() {
            this.$swal({
                content: component.$el,
                buttons: {
                confirm: {
                    value: 0
                }, 
            },
            }).then(() => {
                const movieId = this.$route.params.id;
                return axios({
                method: 'post',
                data: {
                    rate: state.note,
                },
                url: `http://localhost:8081/movies/rate/${movieId}`,
                headers: {
                    'Content-Type': 'application/json',
                },
                })
                .then(() => {
                    this.$swal(`Thank you for rating! ${state.note}`, 'success');
                })
                .catch((error) => {
                    const message = error.response.data.message;
                    this.$swal('Oh oo!', `${message}`, 'error');
                });
        }); 

    },
       async fetchMovie() {
         return axios({
           method: 'get',
           url: `http://localhost:8081/api/movies/${this.$route.params.id}`,
         })
           .then((response) => {
             this.movie = response.data;
           })
           .catch(() => {

           }); 
        },
    }, 
};
</script>

如何在Vuejs组件中实施Vue Star Rating？

0 个答案: