Я не могу привязать данные дочернего компонента к родительскому в vuejs :(

Question

• 1000 , поэтому полученный ответ равен нулю, пожалуйста, помогите мне:

Это код приложения. vue:

<template>
  <div id="app">
    <div class="row col-10 offset-1">
      <div class="col-2">Break news</div>
      <div class="col-2 offset-8">
        <button type="button" class="btn btn-info" v-on:click="clickAdd()">Add new</button>
      </div>
    </div>
    <div class="row col-10 offset-1">
      <table class="table table-hover table-bordered">
        <thead>
          <tr>
            <th scope="col">
              Check
              <input type="checkbox" aria-label="Checkbox for following text input" />
            </th>
            <th scope="col">Title</th>
            <th scope="col">Short Description</th>
            <th scope="col">Content</th>
            <th scope="col">Category</th>
            <th scope="col">Thumbnail</th>
            <th scope="col">Action</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in newsList" :key="item.id">
            <input type="checkbox" aria-label="Checkbox for following text input" />
            <td>{{item.title}}</td>
            <td>{{item.shortDescription}}</td>
            <td>{{item.content}}</td>
            <td>Category</td>
            <td>{{item.thumbnail}}</td>
            <td>
              <button type="button" class="btn btn-warning" v-on:click="clickEdit(item)">Edit</button>
              <button type="button" class="btn btn-danger" v-on:click="clickDelete(item)">Delete</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="row col-10 offset-1"></div>
    <div class="container">
      <edit-news :news="news" @save="clickSave" v-if="isEdit"></edit-news>
      <!-- :news ->> truyen data "news" sang component con; -->
    </div>
  </div>
</template>

<script>
import EditNews from "./components/EditNews";
import axios from "axios";
export default {
  name: "App",
  data() {
    return {
      newsList: [],
      news: "",
      isEdit: false,
      errors: [],
    };
  },
  created() {
    axios
      .get("http://localhost:8081/new?page=1&limit=15")
      .then((response) => {
        debugger;
        this.newsList = response.data.listResults;
      })
      .catch((e) => {
        this.errors.push(e);
      });
  },
  components: {
    "edit-news": EditNews, // khai báo để bên html có thể sử dụng được component
  },
  methods: {
    clickAdd() {
      var news = {
        // id: Math.floor(Math.random() * 10000),
        title: "",
        content: "",
        shortDescription: "",
        thumbnail: "",
      };
      this.news = news;
      this.isEdit = true;
    },
    clickSave(news) {
      // var index = this.newsList.findIndex((item) => item.id == news.id);
      // if (index >= 0) {
      //   this.newsList.splice(index, 1, news); // xoa 1 phan tu di, them phan tu moi vao dung vi tri vua xoa
      // } else {
      //   this.newsList.push(news);
      // }

      axios
        .post("http://localhost:8081/new", {
          news: this.news,
        })
        .then((response) => {
          var data = response.data;
          console.log(response.data);
          this.newsList.push(response.data);
          this.news = "";
        })
        .catch((error) => {
          console.log(error);
        });

      this.isEdit = false;
    },
    clickEdit(news) {
      this.news = JSON.parse(JSON.stringify(news));
      this.isEdit = true;
    },
    clickDelete(news) {
      var index = this.newsList.findIndex((item) => item.id == news.id);
      this.newsList.splice(index, 1);
    },
  },
};
</script>

<style lang="stylus">
.col-2 {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 15px;
  font-size: larger;
  font-weight: bold;
}</style>

и это код Component Editnews. vue :

<template>
  <form id="formSubmit" class="col-10 offset-1">
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">Title</span>
      </div>
      <input type="text" class="form-control" id="title" name="title" v-model="news.title" value />
    </div>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">Category</span>
      </div>
      <select name="categoryCode" class="custom-select" id="categoryCode">
        <option value>Choose Category</option>
        <option value>Choose Category</option>
        <option value>Choose Category</option>
      </select>
    </div>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">Short Description</span>
      </div>
      <input
        type="text"
        class="form-control"
        id="shortDescription"
        v-model="news.shortDescription"
        name="shortDescription"
        value
      />
    </div>

    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">Content</span>
      </div>
      <input
        type="text"
        class="form-control"
        id="content"
        v-model="news.content"
        name="content"
        value
      />
    </div>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">Thumbnail</span>
      </div>
      <input
        type="text"
        class="form-control"
        id="thumbnail"
        name="thumbnail"
        v-model="news.thumbnail"
        value
      />
    </div>

    <div class="btn btn-primary" v-on:click="clickSave()">Save</div>
  </form>
</template>
<script>
export default {
  name: "EditNews",
  props: {
    news: Object, //  props để nhận kiểu đối tượng truyền từ App.vue sang là 1 Object
  },
  methods: {
    clickSave() {
      this.$emit("save", this.news); // truyền data từ component con sang component cha
    },
  },
};
</script>

** А это ответ: ** введите описание изображения здесь