Vue 观察两个链接的输入字段，仅供用户输入

Question

我有两个输入字段，想法是两者都可以改变另一个的值。

如果在 level 字段中输入 1 - 200 的值，Vue 会查找该级别并返回该级别的点数并将它们输入到 points 字段中。

但我也希望发生相反的情况，因此如果用户在点字段中输入一定数量的点，Vue 会查找这些点并返回与该点数关联的级别。

这是可行的，除了 Vue 会进行双重计算，因为它正在监视两个字段，所以如果我在点字段中输入 300，它会正确返回级别 4，但 Vue 会检测到级别字段中的变化，然后将点更改为 250。

我只希望 Vue 检测用户何时更改字段，而不是在更改字段后重新计算。

我希望这是有道理的，这很难解释。

从 axios 请求返回的数据示例：-

[

    {"level":1,"points":0},

    {"level":2,"points":72},

    {"level":3,"points":175},

    {"level":4,"points":250},

    {"level":5,"points":401,}

]

一个简化的 vue 组件来演示我的工作：-

<template>

    <div>

        <div class="card-body">

            <form>

                <div class="row">

                    <div class="col">

                        <div class="form-group">

                            <input type="text" v-model="currentLevel" class="form-control">

                        </div>

                        <div class="form-group">

                            <input type="text" v-model="currentPoints" class="form-control">

                        </div>

                    </div>

                </div>

            </form>

        </div>

    </div>   

</template>

<script>

    export default { 

        data() {

            return {

                currentLevel: 1,

                currentPoints: 0,

                pointsTable: []

            }

        },

        mounted() {

            axios.get('/api/points').then(this.fetchPointsTable);

        },

        methods: {

            fetchPointsTable({data}) {

                this.pointsTable = data;

            }

        },

        watch: {

            currentLevel: function() { 

                const result = this.pointsTable.find( ({ level }) => level === parseInt(this.currentLevel) );

                this.currentPoints = result.experience;

            },

Answer 1

在这种情况下，您正在寻找change事件，该事件将在用户更改输入值时专门激活。当用户提交对元素的更改时，将为<input>、<select>和元素触发 change 事件。与事件不同，事件不一定会在元素的.<textarea>valueinputchangevalue这意味着无论何时用户更改任一输入中的值，change事件都会触发，触发关联的方法并更新另一个框。这在没有任何干扰的情况下发生，因为另一个输入在其值以编程方式更新时不会触发change事件（与跟踪所有值更改的观察者不同），因此不会触发其关联的方法。你的例子的调整版本：<template>    <div>        <div class="card-body">            <form>                <div class="row">                    <div class="col">                        <div class="form-group">                            <input                                type="text"                                v-model="currentLevel"                                 class="form-control"                                 @change="updateCurrentPoints"                            >                        </div>                        <div class="form-group">                            <input                                type="text"                                v-model="currentPoints"                                class="form-control"                                @change="updateCurrentLevel"                            >                        </div>                    </div>                </div>            </form>        </div>    </div>   </template><script>    export default {         data() {            return {                currentLevel: 1,                currentPoints: 0,                pointsTable: []            }        },        mounted() {            axios.get('/api/points').then(this.fetchPointsTable);        },        methods: {            fetchPointsTable({data}) {                this.pointsTable = data;            },            updateCurrentPoints() { // contents of currentLevel watcher                const result = this.pointsTable.find( ({ level }) => level === parseInt(this.currentLevel) );                this.currentPoints = result.experience;            },            updateCurrentLevel() { // contents of currentPoints watcher                var levels = [];                var goal = this.currentXp;                var closest = this.xpTable.reduce(function(prev, curr) {                    if (curr.points <= goal) {                        levels = curr.level;                    }                    return Math.max(levels);                });                this.currentLevel = closest;            },        }    }</script>