VueJSシンプルアラートが表示されます

Question

誰かがこの簡単なアラートの働きを助けることができますか？トリガーボタンをクリックすると、テキストが表示されますが、コンポーネントはその部分を処理する必要があります。

私は新しく、VueJSを学んでいますが、今はコンポーネントの部分にありますが、まだ完全に把握していません。ここで

はリンクです：JSスクリプト

Vue.component('alert', { 
    template: '#alert', 
    props: { 
     errors:false 
    }, 
    data: function() { 
     return { 
     message:"" 
     } 
    }, 
    methods: { 
     appear: function (status) { 
     if(status=="yes") { 
      errors = true; 
      message = "Appeared"; 
     } 
     } 
    } 
}); 

var myapp = new Vue({ 
    components: 'alert', 
    el: '#app', 
    data: { 

    }, 
    methods: { 
    trigger: function() { 
     this.$alert.appear("yes"); 
    } 
    } 


}); 

Answer 1

のJSBIN

スニペットは、あなたのコードの作業私はあなたはそれが私はいくつかの変更を加えた仕事に取得しようとしている考える方法を作るために。

テンプレート

<div id=app> 
    <button @click="trigger">Trigger</button> 
    <alert ref="alert"></alert> 
</div> 

コード

Vue.component('alert', { 
    template: '#alert', 
    data: function() { 
     return { 
     message:"", 
     errors: false 
     } 
    }, 
    methods: { 
     appear: function (status) { 
     if(status=="yes") { 
      this.errors = true; 
      this.message = "Appeared"; 
     } 
     } 
    } 
}); 

var myapp = new Vue({ 
    components: 'alert', 
    el: '#app', 
    data: { 

    }, 
    methods: { 
    trigger: function() { 
     this.$refs.alert.appear("yes"); 
    } 
    } 
}) 

ここupdated binです。

これは非常に異例のことですが、このようなことをする方法です。以下は、より慣用的なアラートの例です。この第2の例で

Vue.component('alert', { 
 
    props:["message","show"], 
 
    template: '#alert', 
 
}); 
 

 
var myapp = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    errors: false, 
 
    errorMessage: null 
 
    }, 
 
    methods: { 
 
    trigger: function() { 
 
     this.errors = true 
 
     this.errorMessage = "Whoops!" 
 
    } 
 
    } 
 
    
 
    
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> 
 

 
    <div id=app> 
 
    <button @click="trigger">Trigger</button> 
 
    <alert :message="errorMessage" :show="errors"></alert> 
 
    </div> 
 
    
 
    <template id="alert"> 
 
    <div v-show="show"> 
 
     <div>{{ message }}</div> 
 
    </div> 
 
    </template>

、警告に表示する情報は、特性介して警告コンポーネントに渡され、アラートはまた、プロパティを介してトリガされます。これは通常、Vueでこれを行う方法です。