1

このビデオのような警告コンポーネントがあります: https://laracasts.com/series/learning-vue-step-by-step/episodes/21そして、別のコンポーネント (本) があります。本が作成されたとき、次のように成功コールバック関数で Alert コンポーネントを呼び出すにはどうすればよいですか:

<alert>A book was created successfully !!!</alert>

私は vue.js を使用する初心者です。ご協力ありがとうございました。

更新：これは私のコードです

submit: function () {
    this.$http.post('/api/books/add', {
        data: this.data,
    }).then(function (response) {
        // I want to use Alert component right here to notice to users.
    }, function (response) {
    });
}

更新 2: アラート コンポーネント

<template>
    <div class="Alert Alert--{{ type | capitalize }}"
         v-show="show"
         transition="fade"
    >
        <slot></slot>

        <span class="Alert__close"
              v-show="important"
              @click="show = false"
        >
            x
        </span>
    </div>
</template>

<script>

    export default {
        props: {
            type: { default: 'info' },
            timeout: { default: 3000 },
            important: {
                type: Boolean,
                default: false
            }
        },

        data() {
            return {show: true};
        },

        ready() {
            if (!this.important)
            {
                setTimeout(
                    () => this.show = false,
                        this.timeout
                    )
            }

        }
    }

</script>

<style>
    .Alert {
        padding: 10px;
        position: relative;
    }

    .Alert__close {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
    }

    .Alert--Info {
        background: #e3e3e3;
    }

    .fade-transition {
        transition: opacity 1s ease;
    }

    .fade-leave {
        opacity: 0;
    }
</style>

そして Book.vue では、次のようにしたい:

// resources/assets/js/components/Book.vue
<template>
    .....
    <alert>A book was created successfully !!!</alert>

    //Create book form
    ....
</template>

<script>
    export default {
        methods: {
            submit: function () {
                    this.$http.post('/api/books/add', {
                    data: this.data,
                }).then(function (response) {
                     this.$refs.alert
                }, function (response) {
                });
    }
</script>
4

2 に答える 2

1

この JSfiddle は、あなたが探していることを行います: https://jsfiddle.net/mikeemisme/s0f5xjxu/

サーバーの応答ではなくボタンを押してアラートをトリガーし、いくつかのメソッド名を変更しましたが、原則は同じです。

アラート コンポーネントは、ボタン コンポーネント内にネストされています。ボタンは、同期修飾子が設定されたアラート コンポーネントに showalert プロパティを渡します。

 <alert :showalert.sync="showalert" type="default" :important="true">A book was saved successfully</alert>

ボタンを押すと、showalert が「true」に設定され、「true」がアラートに prop として渡され、v-show 条件が true としてアラートが表示されます。 

data() {
          //by default we're not showing alert.
          //will pass to alert as a prop when button pressed
          //or when response from server in your case
          return {
            showalert: false
          };
        },

alert コンポーネントの showalert prop の監視は、変更を検出し、timeout プロパティに設定された秒数の後に showalert を「false」に戻すメソッドをトリガーします。

            //this method is triggered by 'watch', below
            //when 'showalert' value changes it sets the timeout
            methods: {
              triggerTimeout: function() {
                //don't run when detect change to false
                if (this.showalert === true) {
                  setTimeout(
                    () => this.showalert = false,
                    this.timeout
                  )
                }
              },
            },

            watch: {
              // detect showalert being set to true and run method
              'showalert': 'triggerTimeout',
            }

このプロップは親に同期されるため、ボタンの状態も更新されます。

動作しますが、時計などを使用すると誇張されているように感じます。Vue には、これを処理するためのより良い方法があるかもしれません。私は Vue を初めて使用するので、知識のある人が参加する可能性があります。

于 2016-03-27T17:09:19.960 に答える
0

データ プロパティを追加する

alertShow: false

次に、コールバックで:

this.alertshow = true;

削除したい場合は false に設定してください。

コンポーネントにディレクティブを追加します。

v-show="alertshow"

アップデート：

ブロック コンポーネントに components 属性を追加します。

components: {Alert},

次に、コンポーネントの外側で、Alert コンポーネント ファイルをインポートします。

import Alert from './directory/Alert.vue'

上記は vueify を使用している場合です。それ以外の場合は、次を使用してコンポーネントを追加します

Vue.component

ドキュメントをチェックしてください。

更新 2:

変更を加えたコード:

<script>
import Alert from './directory/alert.vue';
export default {

    components: {
        Alert
    },

    methods: {
        submit: function () {
                this.$http.post('/api/books/add', {
                data: this.data,
            }).then(function (response) {
                 this.$refs.alert
            }, function (response) {
            });
}

于 2016-03-27T06:48:53.673 に答える