VueJS-模態組件內的表單模板

Question

我正在嘗試在模態中渲染模板，但是很難理解如何將變量傳遞給子模板：

這是該應用程序的主要HTML：

<div id="example" class="container">
  <button
    class="btn btn-primary"
    type="button"
    @click="showModal = !showModal"
    @keyup.esc="showModal = false"
  >Show modal</button>

  <!-- Modal-->
  <transition
    @enter="startTransitionModal"
    @after-enter="endTransitionModal"
    @before-leave="endTransitionModal"
    @after-leave="startTransitionModal"
  >
    <div class="modal fade" v-if="showModal" ref="modal" @click.self="showModal = false">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Select Movie</h5>
            <button class="close" type="button" @click="showModal = false">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <movie-form></movie-form>
          </div>
        </div>
      </div>
    </div>
  </transition>
  <div class="modal-backdrop fade d-none" ref="backdrop"></div>
</div>

和相應的JavaScript：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

<script>
Vue.component('movie-form', {
  props: ['errors', 'movie'],
  template: 
  `<div>
    <form
      id="modal-form"
      @submit="checkForm"
      action="."
      method="post"
    >
      <ul v-if="errors.length">
        <li v-for="error in errors">
          {{ error }}
        </li>
      </ul>

      <div class="form-group">
        <label for="exampleFormControlSelect1">Select movie/label>
        <select
          class="form-control"
          id="movie"
          v-model="movie"
          name="movie"
        >
          <option>Star Wars</option>
          <option>Vanilla Sky</option>
          <option>Atomic Blonde</option>
        </select>
      </div>

      <div class="modal-footer">
        <button class="btn btn-secondary" @click="showModal = false">Close</button>
        <input
          class="btn btn-primary"
          type="submit"
          value="Submit"
        >
      </div>
    </form>
  </div>`,
  methods: {
    checkForm: function(e) {
      if (this.movie && this.desc) {
        return true
      }

      this.errors = []

      if (!this.movie) {
        this.errors.push('Movie is required.')
      }

      e.preventDefault()
    },
  },
})

var vm = new Vue({
  el: '#example',
  data: {
    showModal: false,
    errors: [],
    movie: '',
  },
  methods: {
    startTransitionModal() {
      vm.$refs.backdrop.classList.toggle('d-block')
      vm.$refs.modal.classList.toggle('d-block')
    },
    endTransitionModal() {
      vm.$refs.backdrop.classList.toggle('show')
      vm.$refs.modal.classList.toggle('show')
    },
  },
})
</script>

但是，當模式打開時，我得到TypeError: "errors is undefined" 。

如何解決這個問題？

Answer 1

您需要將<movie-form></movie-form>更改為<movie-form :errors="errors" :movie="movie"></movie-form> 。 道具需要從父組件傳遞到子組件。