Внедрение модального содержимого с помощью кнопки модальной активации в Vue / bulma - PullRequest
Новая
       10

Внедрение модального содержимого с помощью кнопки модальной активации в Vue / bulma

0 голосов
/ 26 января 2019

Внедрение модального содержимого с помощью кнопки модальной активации в Vue / bulma

Я хочу, чтобы модальное всплывающее окно и его содержимое активировались кнопкой. Далее следуют: https://laracasts.com/series/learn-vue-2-step-by-step/episodes/10 это было все здорово. Затем я добавил переменную modalval в корневой экземпляр, чтобы передать сообщение из Нажмите кнопку для переменной modalcontent, которая присутствует в модале. Этот вид работал, но сообщение, представленное вododal, является только значением по умолчанию для modalval, не значение, назначенное в методе modalvalset. Я думаю, это как-то связано с операцией asunc?

В index.html: 

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css" />
    <style type="text/css">body { padding-top: 40px; }</style>
</head>
<body>
    <section id="root" class="section">
        <div class="container">
            <modal v-if="showModal" @close="showModal=false" v-bind:modalcontent="modalval"></modal>
            <button @click="showModal=modalvalset('This is second')">Show model</button>
        </div>
    </section>
    <script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>
    <script src="main.js"></script>
</body>
</html>

В main.js: 

Vue.component('modal', {
    props: ['modalcontent'],
    template: `
<div class="modal is-active">
    <div class="modal-background"></div>
    <div class="modal-content">
        <div class="box">
            {{ modalcontent }}
        </div>
    </div>
    <button class="modal-close" @click="$emit('close')"></button>
</div>
`
});

new Vue({
    el: '#root',
    data: {
        showModal: false,
        modalval: "This is default val"
    },
    methods: {
        modalvalset: function(val) {
            modalval = val;
            vmm.modalcontent = val;
            showModal = true;
            return showModal;
        }
    }
});

Среди других мест, на которые я смотрел: Динамический, многоразовый модал в Vue который не имел решения и был более сложным.

...