로드 시 Vue.js v-if 및 v-f를 포함하는 HTML 태그

로드 시 Vue.js v-if 및 v-f를 포함하는 HTML 태그

Vue.js를 사용하여 뉴스레터에 이메일 주소를 등록하는 기본적이고 매우 간단한 API로 데이터를 전송하고 몇 가지 메시지(상태 및 오류)를 표시합니다.

특히 v-if 및 v-for 명령을 사용하여 오류와 두 가지 메시지를 표시합니다.페이지가 로드될 때 페이지가 완전히 로드되거나 Vue.js 인스턴스가 마운트될 때까지 이들2개의 패러그래프 요소와 순서 없는 리스트 요소 「flash」가 됩니다.

제가 잘못하고 있나요?흔한 문제인가요?로딩 시 모든 요소가 점멸하지 않도록 할 수 있는 방법이 있습니까?

잘 부탁드립니다.

HTML은 다음과 같습니다.

<div id="subscribe-to-newsletter">
    <form v-on:submit.prevent="storeSubscriber" novalidate>
        <label for="email-address">E-mail address</label>
            <input type="email" name="email_address" id="email-address" placeholder="exemple@nomdedomaine.fr" v-model="emailAddress">
            <input type="submit" name="submit" value="Rester informé">
    </form>

    <p v-if="success">Thank you, we will keep you updated</p>

    <p v-if="loading">Loading</p>

    <ul v-for="error in errors.email_address">
        <li v-text="error"></li>
    </ul>
</div>

JavaScript는 다음과 같습니다.

const subscribe = new Vue({
    el: '#subscribe-to-newsletter',

    data: {
        emailAddress: '',
        loading: false,
        success: false,
        errors: []
    },

    methods: {
        storeSubscriber() {
            subscribe.success = false;
            subscribe.errors = [];
            subscribe.loading = true;

            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/api/subscriber', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8');
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

            xhr.onreadystatechange = function () {
                if (this.readyState == 4) {
                    subscribe.loading = false;

                    if (this.status == 200) {
                        subscribe.success = true;
                    } else {
                        subscribe.errors = JSON.parse(xhr.responseText);
                    }
                }
            }

            xhr.send(encodeURI('email_address=' + subscribe.emailAddress));
        },
    }
})

편집

v-clock 명령을 사용하려고 했지만 문제가 해결되지 않았습니다.

문제의 JSFidle

솔루션

이것을 CSS에 추가

[v-cloak] {
    display: none;
}

새로운 HTML은 다음과 같습니다.

<div id="subscribe-to-newsletter">
    <form v-on:submit.prevent="storeSubscriber" novalidate>
        <label for="email-address">E-mail address</label>
            <input type="email" name="email_address" id="email-address" placeholder="exemple@nomdedomaine.fr" v-model="emailAddress">
            <input type="submit" name="submit" value="Rester informé">
    </form>

    <p v-if="success" v-cloak>Thank you, we will keep you updated</p>

    <p v-if="loading" v-cloak>Loading</p>

    <ul v-for="error in errors.email_address" v-cloak>
        <li v-text="error"></li>
    </ul>
</div>

v-clock을 사용하면 해결됩니다.

https://vuejs.org/v2/api/ #v-filengthttp://https://vuejs.org/v2/api/

가변으로 해야 하지 않나요?loading처음에는 참입니다.

data: {
    emailAddress: '',
    loading: true,
    success: false,
    errors: []
},

언급URL : https://stackoverflow.com/questions/41847096/html-tags-containing-vue-js-v-if-and-v-for-directives-flash-at-loading