버튼을 클릭하면 Vue JS bulma 클래스가로드됩니다.

나는 bulma를 시험 중입니다. 클릭하면 show the loading icon over a button으로 가고 싶습니다.버튼을 클릭하면 Vue JS bulma 클래스가로드됩니다.

<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>

내가 할 수에게 있습니다 :

<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>

이 몸의 코드는 다음과 같습니다

그것은 헤드 부분 그것을 작동시키지 마십시오. 내가 뭘 놓치고 있니?

솔루션 :

음, 내가 해결 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; 으로 변경되었습니다.

@click="clicked = true" 그런 다음 동적 클래스 목록에서를 넣어 : data: 당신이 당신의 페이지의 상태의 순수한 설명을 원하는, 그래서 당신의 핸들러에서 다음 clicked : false

을 넣어 당신의

출처

2017-11-23 Pathros

해결 방법처럼 보이지 않습니다. 그것이 당신이 그것을하는 방법입니다. 클래스 속성을 두 배로해서는 안된다는 점을 제외하고는. 아래에서와 같이 동적 클래스를 정적 클래스에 두어보십시오. – bbsimonbb

좋아, 당신의 상태를 수정 벌마 선적 클래스.

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

출처

2017-11-23 15:22:18 bbsimonbb

버튼을 클릭하면 Vue JS bulma 클래스가로드됩니다.

답변

관련 문제