Во-первых, я хочу сказать, что я новичок в Vue, и это мой первый проект, когда-либо использующий Vue.

У меня есть поле со списком, и я хочу сделать что-то другое в зависимости от выбранного поля со списком. Я использую отдельный файл vue.html и TypeScript. Вот мой код:

 

Вот мой файл TypeScript:

 onChange (значение) {
        console.log (значение);
    }

Как мне получить значение выбранного параметра в моей функции TypeScript? Спасибо.

hphp

Ответы (6)

Используйте v-model для привязки значения выбранной опции.Вот пример.



Более подробную информацию можно увидеть из здесь.

Вы можете сохранить @ change = "onChange ()" в качестве наблюдателей. Vue рассчитывает и отслеживает, он предназначен для этого. Если вам нужно только значение, а не другие сложные атрибуты событий.

Примерно так:

  ...
  watch: {
    leaveType () {
      this.whateverMethod(this.leaveType)
    }
  },
  methods: {
     onChange() {
         console.log('The new value is: ', this.leaveType)
     }
  }

Измененное значение будет в event.target.value

const app = new Vue ({
  el: "#app",
  data: function () {
    возвращение {
      сообщение: "Vue"
    }
  },
  методы: {
    onChange (событие) {
      console.log (event.target.value);
    }
  }
})

Вы также можете использовать v-model для спасения




onChangeMethod -> метод по вашему выбору, это может быть что угодно, связанное с вашей программой.



                                                                          

@ - это ярлык для v-on. Используйте @, только если вы хотите выполнить некоторые методы Vue. Поскольку вы не выполняете методы Vue, вместо этого вы вызываете функцию javascript, вам необходимо использовать атрибут onchange для вызова функции javascript



function onChange(value) {
  console.log(value);
}

Если вы хотите вызывать методы Vue, сделайте это так:



new Vue({
  ...
  ...
  methods:{
    onChange:function(event){
       console.log(event.target.value);
    }
  }
})

Вы можете использовать атрибут v-model data в элементе select для привязки значения.



new Vue({
    data:{
        selectedValue : 1, // First option will be selected by default
    },
    ...
    ...
    methods:{
        onChange:function(event){
            console.log(this.selectedValue);
        }
    }
})

Надеюсь, это поможет: -)

2022 WebDevInsider