Old Data not being overridden by new user input in vue component

Question

I have a vue component that is performing a series of conditionals to check if there is previous data when editing a form. Since the form is being edited there is always previous data but if I type something into the input field and click the save button, my newly typed input is not being persisted but rather the same old data is remaining. I understand that it is happening because the v-if condition is always true but I cannot think of a way to modify the condition if the user types new data in to replace it. The original job is being passed in as a prop which contains the old/original data.

A conditional from my vue:

<div v-if="job.title">
  <input :value="job.title" id="title" name="title" type="text" required>
</div>
<div v-else>
  <input v-model="newJob.title" id="title" name="title" type="text" required>
</div>

props: {
  route: String,
  job: Object,
},
data() {
  return {
    newJob: {
      title: ''
    },
  }
},

So when I type new information the v-model for the newJob is not being updated in the vue dev tools. How do I get the newJob field to update IF the user types something in, otherwise continue to save the old/original value that was in the edit form when the page loaded.

If job.title exists then the first input is shown and you are not using v-model or @input to handle changes, so nothing will change, right? — Decade Moon
– Decade Moon, Commented Oct 26, 2020 at 22:38
@DecadeMoon that is correct. So what I want is if a user starts typing something or replaces the original value then the new value is recognized by vue and that new value is persisted to the DB. — CodeConnoisseur
– CodeConnoisseur, Commented Oct 26, 2020 at 22:39

Jaromanda X · Accepted Answer · 2020-10-26 22:38:30Z

2

You only need

<input v-model="newJob.title" id="title" name="title" type="text" required>

and

props: {
    job: Object,
},
data() {
    return {
        newJob: {
            title: this.job.title || "",
        },
    };
},

answered Oct 26, 2020 at 22:38

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CodeConnoisseur Over a year ago

this worked. It was obvious after the fact. Thanks!

Wesley Smith · Accepted Answer · 2020-10-26 22:39:47Z

1

One approach would be to use a property with an object as its default value rather than a prop and a data value:

<input :value="job.title" id="title" name="title" type="text" required>

and

job: {
  type: Object,
  default: function () {
    return {
          title: '',
     }
  }
},

answered Oct 26, 2020 at 22:39

Wesley Smith

19.6k22 gold badges93 silver badges135 bronze badges

Collectives™ on Stack Overflow

Old Data not being overridden by new user input in vue component

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related