VueJS 链接输入

Question

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

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

到目前为止，我已经提出了以下建议（非常复杂，我知道可以整理，但我稍后会改进）。它不起作用，因为除了 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_end 等中显示mon_start 的值将不允许您在mon_end 中显示mon_end 的更新值。

计算：Getter 和 Setter

您真正想要的是在设置新值时发生自定义操作（例如，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
        }
    },

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

避免混淆用户

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

例如。 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/