javascript - 如何在Vue中立即提交后显示评论而不渲染页面

Question

我尝试在单击提交按钮后显示评论。评论数据保存到数据库，但我必须刷新页面，然后该评论才会显示在页面上。我希望我的评论在点击提交按钮后立即出现。你能告诉我这个解决方案的语法吗？

        <div class="form-group">
          <h1>Review Here</h1>
          <textarea
            class="form-control mb-2"
            rows="3"
            v-model="getReview.getDescription"
          ></textarea>
          <div class="row">
            <div class="col-md-6">
              <div id="ratings">
                <div id="like" class="rating">
                  <input
                    type="radio"
                    value="5"
                    v-model="getReview.getRating"
                  >
                  <input
                    type="radio"
                    value="4"
                    v-model="getReview.getRating"
                  >
                  <input
                    type="radio"
                    value="3"
                    v-model="getReview.getRating"
                  >
                  <input
                    type="radio"
                    value="2"
                    v-model="getReview.getRating"
                  >
                  <input
                    type="radio"
                    value="1"
                    v-model="getReview.getRating"
                  >
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <button v-on:click="addNewReview()">Submit</button>
            </div>

这是我的脚本。我尝试将新评论数据推送到评论数组，但它不起作用

<script>
export default {
  props: ["id", "usernow"],
  data() {
    return {
      reviews: [],
      orgData: {
        name_org: "",
        headerpic: "",
        description: ""
      },
      getReview: {
        getOrgId: this.id,
        getUserId: this.usernow.id,
        getRating: "",
        getDescription: ""
      }
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    addNewReview() {
      if (
        this.getReview.getDescription != "" &&
        this.getReview.getRating != 0
      ) {
        axios.post("/api/reviews", {
          org_id: this.getReview.getOrgId,
          user_id: this.getReview.getUserId,
          description: this.getReview.getDescription,
          rating: this.getReview.getRating
        });
        this.getReview.getDescription = "";
        this.getReview.getRating = 0;
        alert("OK");
      } else {
        alert("Please Review and rate this");
      }
    },
    getData() {
      axios.get("/api/listorgs/" + this.id).then(response => {
        var ArrayData = response.data;
        this.orgData = ArrayData.ListOrg;
        this.reviews = ArrayData.Review.map(review => {
          return {
            description: review.description,
            user: review.user,
            rating: review.rating,
            created_at: review.created_at
          };
        });
      });
    }
  }
};
</script>

Answer 1

基于 getData()，我假设每个评论项目必须采用以下形式:

{
  description,
  user,
  rating,
  created_at
}

您必须将 addNewReview() 中的 getReview 对象转换为所需的格式，然后将该新对象推送到 reviews[]:

addNewReview() {
  if (...) {
    axios.post(...);

    const newReview = {
      description: this.getReview.getDescription,
      user: this.getReview.getUserId,
      rating: this.getReview.getRating,
      created_at: new Date()
    };
    this.reviews.push(newReview);

    this.getReview.getDescription = '';
    this.getReview.getRating = 0;

  } else {
    ...
  }
}

new Vue({
  el: '#app',
  data: () => ({
    reviews: [],
    getReview: {
      getOrgId: '',
      getUserId: 'john123',
      getRating: 3,
      getDescription: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, vero quisquam laboriosam magni enim, deserunt provident facilis eaque, alias fuga velit suscipit dolorum. Modi repudiandae nihil in incidunt quis placeat.',
    }
  }),
  methods: {
    addReview(review) {
      this.reviews.push({
        created_at: new Date(),
        user: review.getUserId,
        description: review.getDescription,
        rating: review.getRating
      })
    },
    submitReview() {
      this.addReview({
        getUserId: this.getReview.getUserId,
        getDescription: this.getReview.getDescription,
        getRating: this.getReview.getRating,
      })
    }
  }
})

.reviews {
  list-style: none;
}
.review {
  border: solid 1px #ccc;
  padding: 1em;
  margin: 0.5em;
  border-radius: 3px;
  max-width: 450px;
}
.user {
  font-weight: bold;
}
.created_at {
  font-size: 0.8em;
  color: #888;
}
.description {
  font-style: italic;
}

<script src="https://unpkg.com/vue@2.6.10"></script>

<div id="app">
  <form action="#" @submit.prevent="submitReview">
    <div>
      <label>User
        <input type="text" v-model="getReview.getUserId" required>
      </label>
    </div>
    <div>
      <label>Rating
        <input type="number" min="1" max="5" v-model.number="getReview.getRating" required>
      </label>
    </div>
    <div>
      <label>Comment
        <input type="text" v-model="getReview.getDescription"></input>
      </label>
    </div>

    <button type="submit">Submit review</button>
  </form>

  <h3>Reviews ({{reviews.length}})</h3>
  <ul class="reviews">
    <li class="review" v-for="review in reviews">
      <div>
        <div class="rating">
          <span v-for="n in review.rating">⭐</span>
        </div>
        <span class="user">{{review.user}}</span>
        <div class="created_at">{{review.created_at}}</div>
      </div>
      <p class="description">{{review.description}}</p>
    </li>
  </ul>
</div>