Question

从Vue / bulma中的模式激活按钮注入模式内容

我想要一个模式弹出窗口，它的内容可以通过按钮激活。追随者： https://laracasts.com/series/learn-vue-2-step-by-step/episodes/10 一切都很棒。然后，我在根实例上添加了变量modalval，以便从单击按钮以找到模态内容中的变量modalcontent。这种工作有效，但模态中显示的消息只是模态的默认值，而不是方法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;
        }
    }
});

我查看过的其他地方： Dynamic, reusable modal in vue 没有解决方案，而且变得更加复杂。

从Vue / bulma中的模式激活按钮注入模式内容

0 个答案: