Reputation: 932

Why v-model is not updating in text

<template>
    <div class="card-deck mb-3 text-center">
        <div class="card mb-3 box-shadow">
            <div class="card-header">
                Numbers Checked
            </div>
            <div class="card-body card-info color-accent" v-model="numbers_checked" v-text="numbers_checked">
            </div>
        </div>

    </div>
</template>

<script>
  export default {
    props:
        [
          'overviewAnalytics',
        ],

    data() {
      return {
        numbers_checked: this.overviewAnalytics.numbers_checked
      };
    },
    created() {
      this.channelTemperatureReading.listen('TemperatureReadingUpdate', reading => {
        axios.get('/home/get-overview-analytics').then(resp => {
          this.numbers_checked = 12; //resp.data.numbers_checked + 100;
        });
      });
    },
    computed: {
      channelTemperatureReading() {
        return window.Echo.channel('temperature-reading');
      },
    },
  };
</script>

I've tried everything but text is not updating. Confirmed from every aspect that data does change.

Changes from AXIOS are coming just ok. I even tried to put custom value but no avail.

I don't what is issue here.

Upvotes: 0

Answers (3)

Phil

Reputation: 164970

You appear to be misusing computed properties which rely on reactive dependencies to execute however yours is wrapping window.Echo.channel('temperature-reading') which Vue knows nothing about.

I suggest you remove the computed property and use something like this

created() {
  const channel = window.Echo.channel('temperature-reading')
  channel.listen('TemperatureReadingUpdate', reading => {
    axios.get('/home/get-overview-analytics').then(({ data }) => {
      // console.log('get-overview-analytics', data.numbers_checked)
      this.numbers_checked = data.numbers_checked + 100
    })
  })
}

As others have mentioned, v-model is not appropriate here so you should also remove that.

Upvotes: 0