CODEWITHSUNDEEP
formsvue.jsvuex
nbixler
nbixler

Reputation: 532

How to conditionally populate a form's placeholder?

I have a form I want to allow user submission to with a field called "Job Position." I also have an array of Jobs with a Job Position attribute I'm getting from my vue store. When someone clicks on a job from the list of jobs (series of buttons generated with v-for), I want the form to fill the Job Position field with that particular job's job position (while still allowing people to create new jobs on submit as desired).

I have successfully console.logged both my listOfJobs array and the activeJobIndex for the job on:click. {{listOfJobs[activeJobIndex].jobPosition}} is usable within my vue file.

<div>* Position Title: {{ positionform }}</div>
    <b-form-input v-model="positionform" type="text" size="sm"></b-form-input>
</div>

data() {
    return {
      positionform: 'Position',
    }
}

On first visiting the page, I want the Job Position field to read "Position" which it currently does. I want the user to be able to submit their own Job Position for a new job, which my form allows. And I would like the user to click on a currently listed job and have the Job Position field populated with the job position for that job, which I have not yet been able to do.

Upvotes: 0

Views: 272

Answers (1)

BTL
BTL

Reputation: 4666

You need to bind the v-on:click to a method who will set positionform to listOfJobs[activeJobIndex].jobPosition

You didn't give much code but it would look something like that : 

<component v-on:click="handleSelect"></component>

methods: {
    handleSelect (jobPosition) {
      // jobPosition is listOfJobs[activeJobIndex].jobPosition
      this.positionform = jobPosition; 
    }
}

Upvotes: 1

Related Questions