function not updating vue property

Question

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?

It seems to me that props are peaked only when the component is created, after that they are no longer reactive from the outside. Try assigning prop to data section with mounted hook. Then modify function so it will change the data value. — dymek662
– dymek662, Commented Dec 6, 2022 at 14:15
I am really new to vue. Could you please share some line code or give an example? — oderfla
– oderfla, Commented Dec 6, 2022 at 14:36
what are you getting in prop when component is initially loaded? also you don't have default value for prop. — Ankit.Z
– Ankit.Z, Commented Dec 6, 2022 at 15:09
@oderfla I added an answer. Hope it will work as per your expectation. — Rohìt Jíndal
– Rohìt Jíndal, Commented Dec 7, 2022 at 10:18

Rohìt Jíndal · Accepted Answer · 2022-12-07 10:18:01Z

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>

Collectives™ on Stack Overflow

function not updating vue property

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related