Vue,在发生变更事件时获取发件人元素

时间:2018-02-25 16:06:54

标签: javascript vuejs2 single-page-application vuetify.js

我只是在学习VUE而且我一直在尝试像获取@change事件的sender-element这样简单的事情。 我的标记看起来像这样

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

我设法获取发送元素的唯一方法是使用ref并使用以下内容: this.$refs.tarif1Input.$el但这真的是最好的方法吗?我不知道怎么通过函数参数获取发送元素。

在javascript中手动连接这个似乎是倒退了一步;有点像过度使用全局变量。

我正在使用vuetifyjs。

1 个答案:

答案 0 :(得分: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)
        }
    }
})