Question

我对vue相当陌生，并且正在尝试将其用于引导程序模式。模态中的相关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

更新。

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

vue v模型似乎不适用于模态

1 个答案: