Validation VueJS链接输入

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

输入用于跟踪车辆里程，因此任何一天的值都不能小于前一天的值

到目前为止，我已经提出了以下几点（这是非常复杂的，我知道它可以整理，但我会在以后改进）。它不起作用，因为除了星期一开始，您不能更改任何值

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>

---

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

您正在将数据属性名称与计算属性混合，因此将从计算属性（

get

）中读取该值，并尝试将其写回同一计算属性，但由于您尚未指定

设置器，因此该操作无效

此外，始终在
mon\u end
等中显示
mon\u start
的值将不允许您在
mon\u end
中显示
mon\u end
的更新值

计算：getter和setter

实际上，您希望在设置新值时发生自定义操作（例如，
mon\u start
设置为2，因此所有其他字段都应设置为
2
）

现在我们可以说：如果更新了
mon\u start
，则更新
mon\u end
。如果更新了
mon\u end
，则更新
tue\u start
。等等

这可以通过以下方式实现：

我简化了一点示例（仅使用星期一和星期二）

避免混淆用户

作为用户友好性的额外条件，您可能只希望在下一个值小于或等于上一个值时更新下一个值

例如，
mon\u start
在开头是
1
，然后将
mon\u end
更新为
5
，然后将
mon\u start
更新为
3
。您可能希望
mon\u 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
            }
        }
    }
})


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

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