CODEWITHSUNDEEP
vuejs2watchvue-props
NSR
NSR

Reputation: 343

Vuejs: listen to props changes and use it

I am developing a project using Vue JS and I need to watch the props changes and call it inside a <span>.

I have used watch() and it shows that the props values are assigned.

I have added a screenshot

But when I call it inside the <span> the value is not showing.

props: ['verifyText', 'verifyValue', 'profileId', 'logged', 'verifyType', 'status'],
    watch: {
        verifyText: function () { // watch it
            this.verify_text = this.verifyText;
        },
        verifyValue: function () {
            this.verify_value = this.verifyValue;
        },
        verifyType: function () {
            this.verify_type = this.verifyType;
        }
    },
    data() {
        return {
            verify_type: this.verifyType,
            verify_text: this.verifyText,
            verify_value: this.verifyValue,
        }

    },

//using inside span
<span>{{verify_text}}</span>

Upvotes: 0

Views: 1218

Answers (2)

NSR
NSR

Reputation: 343

I solved this issue by watching the verify_text in the parent component.

'verify_text': function (value) {
    this.verify_text = value;
  },

Same for the verify_type and verify_value Thank you all for replying.

Upvotes: 0

Dev.DY
Dev.DY

Reputation: 455

Receive and insert new data that changes from 'watch'

Try this.

props: ['verifyText', 'verifyValue', 'profileId', 'logged', 'verifyType', 'status'],
watch: {
   verifyText: function (new_value) {
       this.verify_text = new_value;
   }
},
data() {
   return {
      verify_text: this.verifyText,
   }
},
//using inside span
<span>{{verify_text}}</span>

Upvotes: 1

Related Questions