【Vue3】官网项目･Vue Mastery Sock-7结束篇（表格绑定）

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情

实现目标

给产品添加评论功能，并按要求显示历史评论记录

实现步骤

1. 新建📄components/ProductDisplay.js文件并添加如下表格显示数据相关代码

 app.component('review-form',{
    template:
    /*html*/
    `<form class="review-form">
    <h3>评论</h3>
    <label for="name">姓名：</label>
    <input id="name" v-model="name">

    <label for="review">评论：</label>
    <input id="review" v-model="review">

    <label for="rating">等级：</label>
    <select id="rating" v-model.number="rating">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>

    <input class="button" type="submit" value="提交" >
    </form> 
    `,
    data(){
        return {
            name: '',
            review: '',
            rating: null
        }
    }

})

2. 添加提交触发并刷新的事件函数

3. 修改onSubmit()方法

   1. 新建包含表格属性的productReview对象
   2. 将productReview对象向上传递
   3. 重置productReview对象的属性

    methods: {
        onSubmint() {
            let productReview = {
                name: this.name,
                review: this.review,
                rating: this.rating
            }
            this.$emit('review-submitted', productReview)

            this.name = ''
            this.review = ''
            this.rating = null
        }
    }

4. 在index.html中引用新建的ReviewForm.js

<script src="/components/ReviewForm.js"></script>

5. 在ProductDisplay.js中引用<review-form></review-form>模块

<review-form></review-form>

6. 显示已提交的评论

添加存储评论的变量和方法

        <review-form @review-submitted="addReview"></review-form>

         addReview(review) {
              this.reviews.push(review)
            }

新建显示已提交评论的模块组件文件components/ReviewList.js并添加如下代码

        app.component('review-list', {
            props: {
                reviews: {
                    type: Array,
                    required: true
                }
            },
            template:
                /*html*/
                `<div class="review-container">
                <h3>评论</h3>
                <ul>
                    <li v-for="(review, index) in reviews" :key="index">
                    {{ review.name }} 给了 {{ review.rating }} 🌟
                    <br/>
                    "{{ review.review }}"
                    </li>
                </ul>
                </div>
            `
        })

1. 引用文件

       <script src="./components/ReviewList.js"></script>

        <review-list :reviews="reviews"></review-list>

测试效果

扩展下

• 对评论进行筛选显示
• • 有空白项报警

         onSubmit() {
                    if(this.name === '' || this.review==='' || this.rating=== null){
                        alert("请将表格填写完整！")
                        return 
                    }
                    let productReview = {
                        name: this.name,
                        review: this.review,
                        rating: this.rating
                    }
                    this.$emit('review-submitted', productReview)

                    this.name = ''
                    this.review = ''
                    this.rating = null
                }

• • 只显示等级评定>3的评论

        addReview(review) {
              if (review.rating > 3) {
                this.reviews.push(review)
              }
            }

本项目完成～～撒花(｡･ω･｡)ﾉ🎉ﾉ🎉ﾉ🎉 需要完整源代码的同学可以在评论区踢我～～～