vue v-модель не работает в модальном режиме - PullRequest
0 голосов
/ 28 января 2020

Я довольно новичок в vue и пытаюсь использовать его в bootstrap модале. Соответствующий div в модале выглядит следующим образом.

<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>

Я прочитал некоторые другие вопросы о vue возвращении строк, а не чисел, поэтому я преобразовал job.price в число внутри моего метода для вызова модальный

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

Однако файл job.price отказывается появляться в поле ввода в виде строки или числа. Я знаю, что это доступно для модального, поскольку я вижу это, используя <span>{{job.price}}</span>.

Может кто-нибудь посоветовать мне, пожалуйста?

Дополнительно - я думаю, что это проблема отображения - если я изменю поле ввода, запись в <span> изменениях

2-е обновление - исходная таблица

<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>

1 Ответ

0 голосов
/ 28 января 2020

Upd.

Согласно вашим комментариям к моему ответу вы используете v-for, и вы не можете использовать this.job в своем методе. Вы должны дать нам больше кода, чтобы увидеть всю картину.

Upd.2

Вы показали больше кода, но я не видел v-for, поэтому я я в замешательстве. Вы можете попробовать использовать что-то вроде этого, если job является свойством 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');
        },

Но я не уверен в этом, потому что не вижу, где объявлено job.

Upd.3

О! Подождите! У вас есть этот код:

data: appData.jobs, но data должен быть в следующем формате:

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

Или покажите, какова ваша переменная appData.jobs.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...