Search code examples
vue.jsvuejs2vuex

Need the same functionality as a computed property, but I need to be able to update the data after initial change


I have a situation where I need to update data when it detects changes to a state. The user needs to be able to make further changes this info within a textarea. Using computed properties pulls in the data exactly how I want, but any changes made by the user after this are overridden because the computed property keeps changing this data back to it's initial values. What would be the best way to pull in data initially upon a state change but then allow for editing after that point?

Thanks!

Edit: Updated to what i've tried for @Libby.

<textarea v-model="exampleData"></textarea>

computed: {
        ...mapGetters({
            item: 'item'
        })

methods: {
    exampleFunction() {
       this.exampleData = this.item;
}

mounted() {
    this.exampleFunction();
}

Solution

  • Update exampleData in a watcher for item:

    watch: {
      item(value) {
        this.exampleData = value;
      }
    }
    

    This way you can bind your exampleData to the textfield, but changes to the item will still affect it.

    And if you want exampleData to be initially set to the value of item, do that in the component's mounted hook:

    mounted() {
      this.exampleData = this.item;
    }
    

    Here's a fiddle.