vue v-model 似乎没有在模态下工作

Question

我对 vue 还是很陌生，我正在尝试在引导模式中使用它。 modal中的相关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> 中的条目会更改

第二次更新 - 初始表

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

Answer 1

更新。

根据您对我的回答的 cmets，您正在使用 v-for 并且您不能在您的方法中使用 this.job。你应该给我们更多的代码来查看整个画面。

更新.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 的声明位置。

更新.3

哦！等待！你有这个代码：

data: appData.jobs，但data 应该是这种格式：

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

或者告诉我你的 appData.jobs 变量是什么。