No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Data not rendering after route change

    Help
    2
    7
    371
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • U
      uselinux last edited by

      I’m working on an article/blog page.
      It consists of the article body and 4 related posts at the bottom.

      When a related post is clicked I am updating the component’s data in beforeRouteUpdate by calling my Vuex actions.
      The api request hits my server. The data is added to the store. So far, so good.
      The article body updates.
      The 4 related posts do not consistently update even when data is in the store.

      Some of the time it works. Some of the time it does not. Am I dealing with a race condition of some kind?
      When I console.log this.related I more often will see the related posts render. Which is kind of bizarre.

      Any information is helpful, thanks.

      // component
      <template>
      ...
              <div class="col-6 offset-3 article-content" v-html="postContent"></div>
      	<div class="col-10 offset-1">
      		<p class="text-h3">People Also viewed</p>
      		<div class="row q-col-gutter-md">
      			<v-card
      				v-for="(post, index) in postRelated"
      				:key="index"
      				:post="post"
      				excerpt-on
      				class="col-3"
      			/>
      		</div>
      	</div>
      ...
      </template>
      
      <script>
      ...
      created () {
              // Set slug value
      	this.slug = this.$route.path.substr(1, this.$route.path.length - 2)
              // Update store with current post body
      	this.setPostBySlug({
      		sizeMap: this.sizeMap,
      		slug: this.slug + '/'
      	})
              // Update store with current post's related posts
      	this.setRelatedPostsBySlug({
      		sizeMap: this.sizeMap,
      		slug: this.slug + '/'
      	})
      },
      computed: {
      	...mapGetters('articles', ['post', 'related']),
      	postRelated () {
      		return this.related[this.slug]
      	},
              postContent () {
              	return (!this.post || !this.post.content) ? '' : this.post.content
              }
      },
      methods: {
      	...mapActions('articles', ['setPostBySlug', 'setRelatedPostsBySlug'])
      },
      beforeRouteUpdate (to, from, next) {
      	this.slug = to.path.substr(1, to.path.length - 2)
      	this.setPostBySlug({
      		sizeMap: this.sizeMap,
      		slug: this.slug + '/'
      	})
      	this.setRelatedPostsBySlug({
      		sizeMap: this.sizeMap,
      		slug: this.slug + '/'
      	})
      	next()
      }
      ...
      </script>
      
      1 Reply Last reply Reply Quote 0
      • U
        uselinux last edited by

        Little more information. If I check out my Vuex Store in Vue Dev tools and hit “Commit” for setRelatedPosts I immediately see my related cards come up.
        I added console output to my mutation and it does indeed fire on initial data fetching. But I only have rendering after I commit manually.

        I really don’t understand

        1 Reply Last reply Reply Quote 0
        • U
          uselinux last edited by

          Well, I didn’t figure out a solution to the issue. I instead modified my structure so that I only ever store 1 set of related posts instead of organizing by the slug.
          Seems to be working after that.

          Kind of disappointing to dumb down the structure and to not know what the problem was.

          1 Reply Last reply Reply Quote 0
          • dobbel
            dobbel last edited by dobbel

            @uselinux

            https://medium.com/@miladmeidanshahi/update-array-and-object-in-vuejs-a283983fe5ba

            In Vue3 this nonsense will finally be over…

            U 1 Reply Last reply Reply Quote 0
            • U
              uselinux @dobbel last edited by

              @dobbel
              Thank you so much for an explanation.

              In my searches I did encounter Vue.set() without any real information about it as it relates to this. How would I access that within a component or mutation?

              dobbel 1 Reply Last reply Reply Quote 0
              • dobbel
                dobbel @uselinux last edited by

                @uselinux

                How would I access that within a component or mutation?

                in component :
                this.$set() or this.set() (forgot)

                in Vuex store:

                import Vue from 'vue'
                }
                

                https://gist.github.com/DawidMyslak/2b046cca5959427e8fb5c1da45ef7748

                1 Reply Last reply Reply Quote 0
                • U
                  uselinux last edited by

                  Much appreciated.

                  1 Reply Last reply Reply Quote 0
                  • First post
                    Last post