vue v-model does not seem to be working in modal

Question

I am pretty new to vue, and am trying to use it in a bootstrap modal. The relevant div in the modal is as follows.

<div class="form-group row">
    <label for="priceQCField" class="col-sm-2 col-form-label">Price<span class="red"> *</span></label>
    <input type="number" step="0.01" class="form-control col-sm-4" id="priceQCField" name="priceQCField" min="0" v-model="job.price">   
</div>

I read some other questions about vue returning strings rather than numbers, so I have converted the job.price to a number inside my method to call the modal

showPriceJob: function (job) {
    this.job = job;
    this.job.price = parseFloat(this.job.price);
    $('#mdlPriceJob').modal('show');
},

However, job.price refuses to appear in the input field either as a string or a number. I know it is available to the modal as I can see it using <span>{{job.price}}</span>.

Can anyone advise me please?

Additional - I think it is a display issue - if I change the input field, the entry in the <span> changes

2nd update - initial table

<tr class="light-grey" v-for="job in jobs" v-on:click="viewJob(job)">
    <td>{{job.id}}</td>
    <td>{{job.customerName}}</td>
    <td>{{job.description}}</td>
    <td v-bind:class="job.dueDate | dateColour">{{job.dueDate | dateOnly}}</td>
    <td>&pound;{{job.price}} {{job.isEstimate | priceEstimated}}</td>
    <td>{{job.delivery}}</td>
</tr>

could you change the order of changing job.price and showing modal ? — Qonvex620, Jan 28 '20 at 09:49
Use a computed property instead of v-model, so that when it changes somewhere, it reflects in your bootstrap modal — maestro.inc, Jan 28 '20 at 09:54
Qonvex620 - I tried this without success - it didn't appear either with or without the parseFloat — Nik White, Jan 28 '20 at 10:05
maestro.inc - not quiote sure what you mean - can you explain it further? — Nik White, Jan 28 '20 at 10:06
@NikWhite, do you have some error messages within your browser console? — webprogrammer, Jan 28 '20 at 11:39

webprogrammer · Answer 1 · 2020-01-28T12:23:16.120

0

Upd.

According to your comments to my answer you are using v-for and you can't use this.job within your method. You should give us more code to see the whole picture.

Upd.2

You have showed more code but I didn't see any v-for so I am confused. You can try to use something like this if job is a property of appData.jobs:

        showPriceJob: function (job) {
            this.appData.jobs.job = Object.assign({}, job);
            this.appData.jobs.job = parseFloat(this.appData.jobs.job.price);
            $('#mdlPriceJob').modal('show');
        },

But I'm not sure about this because I don't see where job is declared.

Upd.3

Oh! Wait! You have this code:

data: appData.jobs, but data should be in this format:

data: function(){
    return {
        appData: {
            jobs: [],
        },
    }
},

Or show me what is your appData.jobs variable is.

edited Jan 28 '20 at 12:23

answered Jan 28 '20 at 10:42

webprogrammer

2,393
3
21
27

Thank you for the suggestion. Unfortunately, it doesn't seem to have made any difference. – Nik White Jan 28 '20 at 10:49
@NikWhite, Can you show the declaration of `job` within `data`? – webprogrammer Jan 28 '20 at 10:53
- is this what you need to see? var jobs = new Vue({ el: '#appJobs', data: appData.jobs, methods: { – Nik White Jan 28 '20 at 10:58
@NikWhite, Yes, it is. What is `appData.jobs`? Where is your `job` property? – webprogrammer Jan 28 '20 at 11:00
@NikWhite , are you using that code within `v-for`? – webprogrammer Jan 28 '20 at 11:01
appData is a dynamic js file created through a php class $appData['jobs']['jobs'] = Job::getQCData(); $appData['jobs']['job'] = array("id"=>null, "description"=>null); – Nik White Jan 28 '20 at 11:04
Initially there is a v-for list. From that a job is selected to open an initial modal - then if the job needs repricing, the PriceJob modal is opened on top of the first – Nik White Jan 28 '20 at 11:08
@NikWhite, You have this code `v-model="job.price"` where is your `job` declared? Is `job` a property of `appData.jobs`? – webprogrammer Jan 28 '20 at 11:08
@NikWhite, you should add information about `v-for` to the question because it is an important part of an issue. – webprogrammer Jan 28 '20 at 11:10
So I need to add a v-for to pick up the job? If I add {{job.id}} I can see the job ID, so doesn't that mean that it already knows about the job to be repriced? – Nik White Jan 28 '20 at 11:13
@NikWhite, I have made update to my answer. You shoud add some more code because it is unclear what you have and where you are calling your `showPriceJob` method. – webprogrammer Jan 28 '20 at 11:15
@NikWhite, you can see `{{job.id}}` within your `v-for` loop but you can't assign something to your `job` variable within your method like `this.job = ...`. – webprogrammer Jan 28 '20 at 11:16
I am not sure I quote follow you - am I messing it up with my attempt to convert it to a number? Or is it because I am calling a child modal from a parent? If so, How can I pass through the information I need? – Nik White Jan 28 '20 at 11:35
@NikWhite, I have made another update. Can you check it? – webprogrammer Jan 28 '20 at 11:45
made the change and got TypeError: Cannot read property 'jobs' of undefined – Nik White Jan 28 '20 at 12:19
@NikWhite, I have made third update to my answer. Can you check it? – webprogrammer Jan 28 '20 at 12:23
still no luck I am afraid ReferenceError: jobs is not defined – Nik White Jan 28 '20 at 12:26

vue v-model does not seem to be working in modal

1 Answers1