V-model doesn't work

Hello,

I’m currently testing a rating system, and after voting, the rating should be reset, unfortunately, it doesn’t work.

I’m trying to reset the component by the v-model.

the component in question is star-rating

<template>

  <div class="page-wrapper">

    <img alt="logo-bento" class="logo" src="@/assets/img/bento-starter.png" />

    <star-rating v-model="rating" :rating="rating" :inline="true" @rating-selected="reseting"></star-rating>

    <Catloader ref="foo"></Catloader>

  </div>

</template>


<script>

import { mapState } from 'vuex'

import Catloader from '@/components/CatLoader'

import StarRating from 'vue-star-rating'

export default {

  components: {

    Catloader,

    StarRating

  },

  head() {

    return {

      title: {

        inner: 'Home'

      },

      meta: [

        {

          name: 'description',

          content: `${this.appTitle} home page`,

          id: 'desc'

        }

      ]

    }

  },

  data: () => {

    return {

      rating: 0,

      MyVote: 0

    }

  },

  props: {

    rating: Number

  },

  computed: mapState('app', ['appTitle']),

  methods: {

    reseting() {

      this.rating = 0

    }

  }

}

</script>

Do you have any idea ?

Thanks!

Not sure if that’s going to help, but it’s wrong for ‘rating’ to be both in data and props of your top component. In your case, it should only be in data (props in a top level component don’t exist I think). Also, it’s unnecessary, and prob not advised to use v-model on your star-rating component. It’s something you’d only use on standard form components. Try removing this as well.

I agree with the other reply to remove the rating prop. I also recommend

  • removing the above
  • then within your star rating component make sure you are emitting a change event when the rating changes, so the vmodel detects the change and updates the rating value

Hello,

Thank you very much for your reply !

I’ve deleted the props rating and the :rating=“rating”.

I’ve cleaned the code to make it simple, it still doesn’t work

The component used is :

<template>
  <div>
    <StarRating v-model="rating" @rating-selected ="resetRating"></StarRating>
  </div>    
</template>

<script>
import StarRating from 'vue-star-rating'

export default {
  components: {
    StarRating
  },
  data() {
    return {
      rating: 1
    }
  },
  methods: {
    resetRating() {
      this.rating = 0
    }
  }
}
</script>

Hi

The problem is that then resetRating is run is the rating changed to 0 but because the mouse is howering over a rating will it immediatly be set to this value before it is redrawn. If you introduce a wait you can select a rating and move the mouse away and you will se it change.

<template>
  <div>
    <StarRating v-model="rating" @rating-selected ="resetRating"></StarRating>
  </div>    
</template>

<script>
import StarRating from 'vue-star-rating'

export default {
  components: {
    StarRating
  },
  data() {
    return {
      rating: 1
    }
  },
  methods: {
    resetRating() {
      // Set this.rating after 1 s (1000 ms)
      setTimeout(() => this.rating = 0, 1000);
    }
  }
}
</script>

Hello Johan,

Thank you so much ! Your solution solved my issue a and I learned something !

I was on this problems for hours…

Have a nice day

1 Like

Your welcome. Good you posted the code it was easy to test it myself