父子之间的双向数据绑定答案

【问题标题】：Two way data binding between parent and child父子之间的双向数据绑定
【发布时间】：2021-01-08 10:19:03
【问题描述】：

我正在学习 VueJS，并正在尝试构建一个简单的应用程序，您可以在其中列出、查看、创建、编辑和删除故事。故事只是标题、内容（只是文本）和日期时间。我设法查看、列出、创建和删除工作，目前正在构建编辑部分。

对于编辑部分，我认为如果我可以重用我用于创建的表单会很好。这个想法是，当用户单击“编辑按钮”（故事列表中的故事的）时，该故事将被预填充的表单替换。

我尝试过使用 v-model 来实现它，但出现以下错误

[Vue warn]: Error in render: "TypeError: Cannot read property 'title' of undefined"

found in

---> <StoriesForm> at src/components/StoryForm.vue
       <Stories> at src/components/Stories.vue
         <StoriesApp> at src/App.vue
           <Root>

我的故事.vue：

<template>
  <div>
    <b-modal id="delete_story_modal">Delete?</b-modal>
    <b-container>
      <b-card v-for="story in stories" v-bind:key="story.id" :title="story.title">
      <b-card-text><router-link :to="{ path: '/'+ story.id + '/'}">{{ story.content }}</router-link></b-card-text>
      <b-card-text>{{ story.datetime }}</b-card-text>
        <b-button @click="editStory(story.id)">Edit</b-button>
        <b-button @click="deleteStory(story.id)">Delete</b-button>
      </b-card>
      <b-button @click="showForm" id="add_button" v-if="!add_story">Add story</b-button>
    </b-container>
    <StoryForm v-if="add_story" v-model="story" />
  </div>
</template>

<script>
import StoryForm from './StoryForm'

export default {
  name: 'Stories',
  components: {
    StoryForm
  },
  data () {
    return {
      story: {
        title: '',
        content: '',
        datetime: ''
      },
      add_story: false,
      stories: []
    }
  },
  beforeMount () {
    this.getStories()
  },
  methods: {
    async getStories () {
      // ajax request, get data, parse it, fill it
      this.stories = stories_parsed
    },
    showForm () {
      this.add_story = true;
    },
  }
}
</script>

还有 StoryForm.vue

<template>
  <b-container>
    <b-card>
      <form
        id="add_story"
        action="http://localhost:8000"
        method="post"
        @submit.prevent="addStory">

        <b-alert v-model="error">{{ error_msg }}</b-alert>

        <b-form-input
          v-model="story.title"
          required
          placeholder="Enter title"
        ></b-form-input>
      
        <b-form-textarea
          v-model="story.content"
          placeholder="Enter story"
        ></b-form-textarea>

        <b-button type="submit">Submit</b-button>
      </form>
    </b-card>
  </b-container>
</template>

<script>
export default {
  name: 'Stories-form',
  props: {
    story: {
      type: Object,
      required: true
    },
  },
  components: {},
  data () {
    return {
      error: false,
      error_msg: "no success sadly"
    }
  },
  methods: {
    async addStory () {
      ...
    }
  }
}
</script>

由于这不起作用，我搜索并找到了这个：How to update parent v-model using child components' prop?

但也无法让它发挥作用。

【问题讨论】：

标签： vue.js vue-component

【解决方案1】：

假设您使用 v2，v-model="story 相当于两个属性：:value="story" 和 @input="story = $event"。这意味着您必须使用 value 而不是 story 作为您的道具名称，并让您的子组件以新值作为参数发出 input 事件。

Vue 3 略有不同，因此请查看 official documentation 关于 v-model 属性以及自 v2 以来对其所做的更改。

【讨论】：