0
私はbulmaを試しています。私がしたいのは、クリックするとshow the loading icon over a buttonです。ボタンをクリックするとVue JS add bulmaクラスが読み込まれます
ここでは、ヘッド部です：
<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>
これは、体のコードです：ここで
<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="[email protected]" 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>
は、私ができるvue.jsスクリプト
<script src="https://unpkg.com/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
loadingClass: ''
}
})
</script>
ですそれを働かせないでください。私は何が欠けていますか？
ソリューション：
まあ、私は回避策here in the docsを発見したので、次のように私はそれを修正した：
フォーム：
<!-- Submit button -->
<div class="field">
<div class="control">
<button class="button is-primary" v-bind:class="{ 'is-loading' : loading }">Submit</button>
</div>
</div>
スクリプト：
<script>
var app = new Vue({
el: '#app',
data: {
loading: false
}
})
</script>
私が共同で変更したnsole app.loading=true;ボタンが「読み込み中」に変わり、viceversaがapp.loading=false; となりました。
回避策のようには見えません。それがあなたがそれをする方法です。クラス属性を倍にするべきではないことを除いて。以下のように、静的クラスを動的クラスに入れてみてください！ – bbsimonbb