Vue，在更改事件中获取发送者元素

Question

我刚刚学习 VUE，我一直在尝试一些简单的事情，比如获取 @change 事件的发送者元素。 我的标记看起来像这样

<v-text-field label="Takst 1" ref="tarif1Input" v-model="Income.Tariffs[0]" field="@SecurityHelper.SimpleCrypt("CUST_TARIFF1")" @@change="tariffChanged"></v-text-field>

事件是这样连接起来的：

methods: {
                tariffChanged: function (newVal) {
                    var $s = $(this.$refs.tarif1Input.$el).find('input');
                    var newValue = $s.getValue();

                    $.post('/api/Budget/SaveTariff', {
                        FieldKey: $s.attr('field'),
                        Value: newVal
                    }).done(function () {
                        app.populateIncome();
                    });
                }
}

我设法获取发送元素的唯一方法是使用 refs 并使用 this ： this.$refs.tarif1Input.$el 但这真的是最好的方法吗？我不能以某种方式通过函数参数获取发送元素。

这似乎是在 javascript 中手动连接的一种倒退；有点像过度使用全局变量。

我正在使用 vuetifyjs。

Answer 1

看看这个小提琴https://jsfiddle.net/55e46mn3/4/

<div id="app">
  <input type="text" @change="tariffChange"/>
</div>

---

const app = new Vue({
    el: '#app',

    methods: {
        tariffChange(event) {
           const inputTarget = event.target;
           console.log(inputTarget.value)
        }
    }
})