Render new Vue prop value-CodePudding

I have {{ story.score }} in a template and a function which updates the score:

setup(props) {
 const changeScore = (value) => {
  props.story.score = value;
}
return {
  changeScore,
}

New value is assigned to props.story.score, but template doesn't rerender, what is missing here?

CodePudding user response：

Vue props has a One-Way Data Flow

All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around

You need to emit an event. Check out v-model on components

CodePudding user response：

You can't change props directly in vue, it wont trigger an update. The proper way is to emit changes to parent element, like this:

setup({ props, emit }) {
  const changeScore = (value) => emit('update-story-score', value);

  return { changeScore }
}

Then just handle an event in parent, like this:

<template>
  <Test @update-story-score="updateStoryScore"></Test>
</template>
<script>
import { reactive } from 'vue'

export default {
  setup() {
    const story = reactive({ score: 1 });

    const updateStoryScore = (value) => story.score = value;

    return { story, updateStoryScore }
  },
};
</script>