Vue JS在单击按钮时添加bulma类正在加载

Question

I am trying out bulma.我正在尝试布尔玛。 What I want is to show the loading icon over a button when it is clicked.我想要的是在单击按钮时在按钮上显示加载图标。

Here it's the head part:这是头部：

<head>
    <meta charset="UTF-8">
    <title>Button loading in Bulma</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">
</head>

This is the body code:这是正文代码：

<div class="container">
        <!--Vue container-->
    <div id="app">
        <div class="tile notification is-info">
            <div class="column">
                <h1>Newsletter</h1>
                <form>
                    <!-- Email -->
                    <div class="field">
                        <label class="label" for="email">Email</label>
                        <div class="control">
                            <input class="input is-small" type="email" id="email" placeholder="you@somewhere.com" autofocus>
                        </div>
                    </div>
                    <!-- Submit button -->
                    <div class="field">
                        <div class="control">
                            <button class="button is-primary" @click="loadingClass = 'is-loading'" :class="{ loadingClass }">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

Here is the vue.js script这是 vue.js 脚本

<script src="https://unpkg.com/vue"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            loadingClass: ''
        }
    })
</script>

I can't get it to work.我无法让它工作。 What am I missing?我错过了什么？

Solution:解决方案：

Well, I have found a workaround here in the docs , so I have fixed it as follows:好吧，我在 docs 中找到了一种解决方法，因此我将其修复如下：

Form:形式：

<!-- Submit button -->
                        <div class="field">
                            <div class="control">
                                <button class="button is-primary" v-bind:class="{ 'is-loading' : loading }">Submit</button>
                            </div>
                        </div>

Script:脚本：

<script>
    var app = new Vue({
        el: '#app',
        data: {
            loading: false
        }
    })
</script>

As I change in the console app.loading=true;当我在控制台中更改app.loading=true; the button does change to "loading" and viceversa with app.loading=false;该按钮确实更改为“正在加载”，反之亦然app.loading=false; That's it.而已。

Answer 1

Ok in your data: you want a pure description of the state of your page, so put clicked : false在您的data:您想要对页面状态的纯粹描述，因此请clicked : false

Then in your handler, modify your state: @click="clicked = true"然后在您的处理程序中，修改您的状态： @click="clicked = true"

Then in your dynamic class list, put the bulma loading class.然后在你的动态类列表中，放入bulma加载类。

:class="{'button':true, 'is-primary':true, 'is-active':clicked}"

Does that cover it?这覆盖它吗？

Vue JS在单击按钮时添加bulma类正在加载

问题描述

1 个解决方案

解决方案1
2 2017-11-23 15:22:18

Vue JS在单击按钮时添加bulma类正在加载

问题描述

1 个解决方案

解决方案1 2 2017-11-23 15:22:18

解决方案1
2 2017-11-23 15:22:18