Question

我想通过VueJS链接多个输入并计算值。

输入是跟踪车辆里程数，因此任何给定日期的值都不能小于前一天的值。

Linked Inputs

到目前为止，我已经提出了以下内容（它非常令人费解，我知道它可以整理，但我稍后会对此进行改进）。它无法正常工作，因为除了 Monday Start 之外，您无法更改任何值。

https://jsfiddle.net/mstnorris/qbgtpm34/1/

HTML

<table id="app" class="table">
    <thead>
    <tr>
        <th>Day</th>
        <th>Start</th>
        <th>End</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">Mon</th>
        <td>
            <input type="number" class="form-control" v-model="mon_start" number id="mon_start" placeholder="Monday Start Mileage">
        </td>
        <td>
            <input type="number" class="form-control" v-model="mon_end" number id="mon_end" placeholder="Monday End Mileage">
        </td>
    </tr>
    <tr>
        <th scope="row">Tue</th>
        <td>
            <input type="number" class="form-control" v-model="tue_start" number id="tue_start" placeholder="Tuesday Start Mileage">
        </td>
        <td>
            <input type="number" class="form-control" v-model="tue_end" number id="tue_end" placeholder="Tuesday End Mileage">
        </td>
    </tr>
    <tr>
        <th scope="row">Wed</th>
        <td>
            <input type="number" class="form-control" v-model="wed_start" number id="wed_start" placeholder="Wednesday Start Mileage">
        </td>
        <td>
            <input type="number" class="form-control" v-model="wed_end" number id="wed_end" placeholder="Wednesday End Mileage">
        </td>
    </tr>
    <tr>
        <th scope="row">Thu</th>
        <td>
            <input type="number" class="form-control" v-model="thu_start" number id="thu_start" placeholder="Thursday Start Mileage">
        </td>
        <td>
            <input type="number" class="form-control" v-model="thu_end" number id="thu_end" placeholder="Thursday End Mileage">
        </td>
    </tr>
    <tr>
        <th scope="row">Fri</th>
        <td>
            <input type="number" class="form-control" v-model="fri_start" number id="fri_start" placeholder="Friday Start Mileage">
        </td>
        <td>
            <input type="number" class="form-control" v-model="fri_end" number id="fri_end" placeholder="Friday End Mileage">
        </td>
    </tr>
    <tr>
        <th scope="row">Sat</th>
        <td>
            <input type="number" class="form-control" v-model="sat_start" number id="sat_start" placeholder="Saturday Start Mileage">
        </td>
        <td>
            <input type="number" class="form-control" v-model="sat_end" number id="sat_end" placeholder="Saturday End Mileage">
        </td>
    </tr>
    <tr>
        <th scope="row">Sun</th>
        <td>
            <input type="number" class="form-control" v-model="sun_start" number id="sun_start" placeholder="Sunday Start Mileage">
        </td>
        <td>
            <input type="number" class="form-control" v-model="sun_end" number id="sun_end" placeholder="Sunday End Mileage">
        </td>
    </tr>
    </tbody>
</table>

VueJS

new Vue({
    el: "#app",
    data: {
        mon_start: '',
        mon_end: '',
        tue_start: '',
        tue_end: '',
        wed_start: '',
        wed_end: '',
        thu_start: '',
        thu_end: '',
        fri_start: '',
        fri_end: '',
        sat_start: '',
        sat_end: '',
        sun_start: '',
        sun_end: ''
    },
    computed: {
        mon_end: function() {
            return this.mon_start
        },
        tue_start: function () {
            return this.mon_end
        },
        tue_end: function() {
            return this.tue_start
        },
        wed_start: function () {
            return this.tue_end
        },
        wed_end: function() {
            return this.wed_start
        },
        thu_start: function () {
            return this.wed_end
        },
        thu_end: function() {
            return this.thu_start
        },
        fri_start: function () {
            return this.thu_end
        },
        fri_end: function() {
            return this.fri_start
        },
        sat_start: function () {
            return this.fri_end
        },
        sat_end: function() {
            return this.sat_start
        },
        sun_start: function () {
            return this.sat_end
        },
        sun_end: function() {
            return this.sun_start
        }
    }
})

Answer 1

为什么到目前为止这不起作用？

您正在将数据属性名称与计算属性混合在一起，因此将从计算属性（get）中读取该值，并且它将尝试将其写回到相同的计算属性，由于您没有没有分配setter。

此外，始终在mon_start等中显示mon_end的值不允许您在mon_end中显示mon_end的更新值。

Computed：Getters and Setters

您真正想要的是在设置新值时要执行的自定义操作（例如mon_start设置为2，因此所有其他字段都应设置为2）。

现在我们可以说：如果mon_start已更新，请更新mon_end。如果mon_end已更新，请更新tue_start。等等。

这可以使用computed setters：

来实现

    mon_start_model: {
        get: function() {
              return this.mon_start
            },
        set: function(val) {
            this.mon_start = val
            this.mon_end_model = this.mon_start
        }
    },

我已经简化了一些例子（仅使用星期一和星期二）。

避免让用户感到困惑

作为用户友好性的额外条件，如果下一个值小于或等于之前的值，您可能只希望更新下一个值。

EG。 mon_start开头为1，然后您将mon_end更新为5，然后将mon_start更新为3。您可能希望mon_end保留值5，对吗？

new Vue({
    el: "#app",
    data: {
        mon_start: 0,
        mon_end: 0,
        tue_start: 0,
        tue_end: 0,
    },
    computed: {
        mon_start_model: {
            get: function() {
                  return this.mon_start
                },
            set: function(val) {
                this.mon_start = val
                this.mon_end_model = Math.max(this.mon_end, this.mon_start)
            }
        },
        mon_end_model: {
            get: function() {
                return this.mon_end
            },
            set: function(val) {
                this.mon_end = val
                this.tue_start_model = Math.max(this.tue_start, this.mon_end)
            }
        },
        tue_start_model: {
            get: function () {
                return this.tue_start
            },
            set: function(val) {
                this.tue_start = val
                this.tue_end_model = Math.max(this.tue_end, this.tue_start)
            }
        },
        tue_end_model: {
            get: function() {
                return this.tue_end
            },
            set: function(val) {
                this.tue_end = val
            }
        }
    }
})

https://jsfiddle.net/qbgtpm34/5/

VueJS链接输入

1 个答案: