Ես կցանկանայի ցույց տալ և թաքցնել bootstrap մոդալ երկխոսություն, որտեղ այս երկխոսությունը vue բաղադրիչ է, որը ես կարող եմ հարմարեցնել դրա հաստատունը (հաղորդագրություն, կոճակներ)՝ օգտագործելով հենակետեր:
Ես օգտագործում եմ v-if='show' այն ցույց տալու համար, բայց խնդիրն այն է, որ ես չեմ կարող show-ը սահմանել false, երբ մոդալը փակ է՝ սեղմելով մոդալ ֆոնի վրա: Արդյունքում երկխոսությունը ցուցադրվում է մեկ անգամ, բայց երբ այն փակ է, այն նորից չի ցուցադրվում, երբ ես երկրորդ անգամ սեղմում եմ ջնջել կոճակը:
Ես ունեմ մեկ vue.js բաղադրիչ, որը կոչվում է «անձ», որը պարունակում է մեկ այլ բաղադրիչ՝ «հաստատել-ջնջել» հետևյալ կերպ.
Person.vue:
<template>
<div>
<confirm-delete v-if="show" :msg="deleteMsg"></confirm-delete>
<!-- person details -->
<button @click="confirmDelete">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</template>
<script>
export default {
data () {
return {
show: false,
deleteMsg: ''
}
},
methods: {
confirmDelete () {
this.show: true,
this.deleteMsg: 'Are you sure you want to delete this person?'
}
}
}
</script>
ConfirmDelete.vue:
<template>
<div id="modalDelete" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="media-body">
<p>{{msg}}</p>
</div>
</div>
</div>
</div>
<template>
<script>
export default {
props: ['msg'],
mounted: function(){
$('#modalDelete').modal('show')
}
}
</script>
Իհարկե, եթե ես օգտագործում եմ միայն մեկ բաղադրիչ՝ ներառելով երկխոսության կոդը անձի մեջ, սա աշխատում է: Բայց իմ նպատակն է նորից օգտագործել այս երկխոսության բաղադրիչը իմ հավելվածի այլ մասերում:
Կա՞ գաղափար, թե ինչպես կարող եմ դա անել:
