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>