CODEWITHSUNDEEP
vue.js
oderfla
oderfla

Reputation: 1797

function not updating vue property

I have this component:

<template>
  <div class="hello">
    <div>
      My prop: {{ myprop }}?
    </div>
    <div>
      <button class="fas fa-lock-open lock" @click="changeText()">Click</button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'StartPage',
  props: {
    myprop: {
      type: String
    }
  },
  model: {
    prop: 'myprop',
    event: 'click'
  },
  methods: {
    changeText () {
      this.$emit('click', 'sometext')
      console.log('this.myprop', this.myprop)
    }
  }
})
</script>

Im using vue v3. Everytime I click on the button, I still see the text "My prop: ?" in the browser. And in the console I can see: "this.myprop undefined" every time I click on the button. What am I doing wrong?

Upvotes: 0

Views: 97

Answers (1)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27202

As per my understanding, You are trying to update the prop text on click of button from the child component. If Yes, you can achieve it simply by emitting a new text and updating that in the parent component.

Live Demo :

const ShowPropText = {
  template: `<div class="hello">
               <div>
                 My prop: {{ myprop }}
               </div>
               <div>
                 <button class="fas fa-lock-open lock" @click="changeText()">Click</button>
               </div>
             </div>`,
  props: ['myprop'],
  methods: {
    changeText() {
      this.$emit('click-event', 'sometext')
    }
  }
}

const app = Vue.createApp({
  components: {
    'show-prop-text': ShowPropText
  },
  data() {
    return {
        text: 'This is default text'
    }
  },
  methods: {
    methodCall(e) {
        this.text = e;
    }
  }
})

app.mount('#app')
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
<div id="app">
  <show-prop-text :myprop="text" @click-event="methodCall"></show-prop-text>
</div>

Upvotes: 1

Related Questions