Vue JS Modal funktioniert nicht

Question

Ich habe eine modale Komponente in Vue JS erstellt. Es muss alle Namen anzeigen, die im Formular eingegeben wurden. Es funktioniert nicht. Was kann ich tun, um dieses Problem zu lösen? Ich bin neu in Vue JS. Ich kann auch keine Shorthands benutzen. Weißt du, warum? Bitte hilf mir. Vielen Dank im Voraus. Dies ist mein Code:

<template> 
    <div class="template_class"> 
    <div> 
    <b-btn v-b-modal.modal1>Launch demo modal</b-btn> 

    <!-- Main UI --> 
    <div class="mt-3 mb-3"> 
    Submitted Names: 
    <ul> 
     <li v-for="n in names">{{n}}</li> 
    </ul> 
    </div> 

    <!-- Modal Component --> 
    <b-modal id="modal1" title="Submit your name" @ok="submit" @shown="clearName"> 

    <form @submit.stop.prevent="submit"> 
     <b-form-input type="text" placeholder="Enter your name" v-model="name"></b-form-input> 
    </form> 

    </b-modal> 
</div> 
    </div> 
</template> 

<script> 

export default { 
    data: { 
    name: '', 
    names: [] 
    }, 
    methods: { 
    clearName() { 
     this.name = ''; 
     }, 
     submit(e) { 
     if (!this.name) { 
      alert('Please enter your name'); 
      return e.cancel(); 
     } 

     this.names.push(this.name); 
     this.name = ''; 
     } 
    } 
} 

</script> 

<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped> 

</style> 

Answer 1

Ihr Code keinen Sinn für mich, das ist ein großes wiederverwendbares Beispiel aus der vue Homepage ist https://vuejs.org/v2/examples/modal.html

Dieser Code direkt aus dem Beispiel kopiert, ich nur zitieren es als einzelne Dateikomponente:

<template> 
    <transition name="modal"> 
    <div class="modal-mask"> 
     <div class="modal-wrapper"> 
     <div class="modal-container"> 

      <div class="modal-header"> 
      <slot name="header"> 
       default header 
      </slot> 
      </div> 

      <div class="modal-body"> 
      <slot name="body"> 
       default body 
      </slot> 
      </div> 

      <div class="modal-footer"> 
      <slot name="footer"> 
       default footer 
       <button class="modal-default-button" @click="$emit('close')"> 
       OK 
       </button> 
      </slot> 
      </div> 
     </div> 
     </div> 
    </div> 
    </transition> 
</template> 

<script> 
export default{ 
    name: 'modal' 
} 
</script> 

<style> 
.modal-mask { 
    position: fixed; 
    z-index: 9998; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, .5); 
    display: table; 
    transition: opacity .3s ease; 
} 

.modal-wrapper { 
    display: table-cell; 
    vertical-align: middle; 
} 

.modal-container { 
    width: 300px; 
    margin: 0px auto; 
    padding: 20px 30px; 
    background-color: #fff; 
    border-radius: 2px; 
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33); 
    transition: all .3s ease; 
    font-family: Helvetica, Arial, sans-serif; 
} 

.modal-header h3 { 
    margin-top: 0; 
    color: #42b983; 
} 

.modal-body { 
    margin: 20px 0; 
} 

.modal-default-button { 
    float: right; 
} 

/* 
* The following styles are auto-applied to elements with 
* transition="modal" when their visibility is toggled 
* by Vue.js. 
* 
* You can easily play with the modal transition by editing 
* these styles. 
*/ 

.modal-enter { 
    opacity: 0; 
} 

.modal-leave-active { 
    opacity: 0; 
} 

.modal-enter .modal-container, 
.modal-leave-active .modal-container { 
    -webkit-transform: scale(1.1); 
    transform: scale(1.1); 
} 
</style> 

Answer 2

Dies funktioniert wie erwartet für mich. Edit Ich entfernte die @shown Bindung aus dem Modal, da es scheint, einige Bugginess einzuführen.

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    name: 'Pigman', 
 
    names: [] 
 
    }, 
 
    methods: { 
 
    clearName() { 
 
     this.name = ""; 
 
    }, 
 
    submit(e) { 
 
     if (!this.name) { 
 
     alert('Please enter your name'); 
 
     return e.cancel(); 
 
     } 
 

 
     this.names.push(this.name); 
 
     this.clearName(); 
 
    } 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 
<!-- Add this to <head> --> 
 
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css" /> 
 
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" /> 
 

 
<!-- Add this after vue.js --> 
 
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script> 
 
<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script> 
 
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script> 
 

 
<div id="app" class="template_class"> 
 
    <div> 
 
    <b-btn v-b-modal.modal1>Launch demo modal</b-btn> 
 
    Current name: {{name}} 
 

 
    <!-- Main UI --> 
 
    <div class="mt-3 mb-3"> 
 
     Submitted Names: 
 
     <ul> 
 
     <li v-for="n in names">{{n}}</li> 
 
     </ul> 
 
    </div> 
 

 
    <!-- Modal Component --> 
 
    <b-modal id="modal1" title="Submit your name" @ok="submit"> 
 

 
     <form @submit.stop.prevent="submit"> 
 
     <b-form-input type="text" placeholder="Enter your name" v-model="name"></b-form-input> 
 
     </form> 
 

 
    </b-modal> 
 
    </div> 
 
</div>