0

我对 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>
4

1 回答 1

0

更新。

根据您对我正在使用的答案的评论，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变量是什么。

于 2020-01-28T10:42:25.153 回答