vuejs / Discussion

Vue.js discussion
167 stars 17 forks source link

v-if works oddly when loading data asynchronously #474

Closed Twiknight closed 8 years ago

Twiknight commented 8 years ago

In the following code, I found multiple instance of article would be displayed after the computed property url changed several times.

err...I'm not sure, but I guess the asynchronous data loading makes v-if working improperly.

unfortunately, I failed to upload the source file. Below are code with problem(vue-version:1.0.11):

<template>
    <div class="blog">
        <article class="md" transition="slideIn" v-if="show">
            {{{content}}}
        </article>
    </div>
</template>

<script>
import  vuex from "../vuex";
import {fetchBlog} from "../utils";

export default{
    name: "blog",
    data(){
        return {
            content:"",
            show:false
        }
    },
    computed:{
        url() {
            return vuex.state.currentPost;
        }
    },
    watch:{
        'url':function(url){
            this.show=false;
            fetchBlog(url).then((text)=>{
                this.content = text;
                this.show=true;
            });
        }
    }
}
</script>

If more information need, pls let me know. I will set up a repo for reproducing.

Twiknight commented 8 years ago

here goes the problem page‘s screen shot:

image

Twiknight commented 8 years ago

move to issues for vue