Question

我正在尝试在模态内部渲染模板，但是很难理解如何将变量传递给子模板：

这是应用程序的主要HTML：

Private Sub Worksheet_SelectionChange(ByVal Target As Range)
    Dim xRtn As Variant
    If Selection.Count = 1 Then
        If Not Intersect(Target, Range("B1:C2")) Is Nothing Then
            xRtn = Application.Inputbox("Insert your value please")
            Sheets("Sheet2").Range(Target.Address).Value = xRtn

        End If
    End If
End Sub

以及相应的JavaScript：

<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>

但是模态打开时我得到<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>。

该如何解决？

Answer 1

您需要将<movie-form></movie-form>更改为<movie-form :errors="errors" :movie="movie"></movie-form>。道具需要从父组件传递到子组件。

VueJS-模态组件内的表单模板

1 个答案: