Vue.js получает выбранную опцию на @change


102

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

<select name="LeaveType" @change="onChange()" class="form-control">
     <option value="1">Annual Leave/ Off-Day</option>
     <option value="2">On Demand Leave</option>
</select>

а вот мой ts файл

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

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

Ответы:


188

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

<select name="LeaveType" @change="onChange($event)" class="form-control" v-model="key">
   <option value="1">Annual Leave/ Off-Day</option>
   <option value="2">On Demand Leave</option>
</select>
<script>
var vm = new Vue({
    data: {
        key: ""
    },
    methods: {
        onChange(event) {
            console.log(event.target.value)
        }
    }
}
</script>

Больше ссылок можно увидеть здесь .


1
появляется ошибка «ключ не определен». мне нужно сначала определить v-модель? если да, то как?
hphp

Да, вы можете установить любое имя для замены ключа. Но убедитесь, что это свойство данных.
ramwin

Я до сих пор не понимаю ... Я знаю, что могу переименовать его в любое имя, но получаю предупреждение "[Vue warn]: свойство или метод" selected "не определены в экземпляре, но на него ссылаются во время рендеринга. Убедитесь, что это свойство является реактивным либо в параметре данных, либо для компонентов на основе классов, путем инициализации свойства »
hphp

Возможно, в вашем скрипте есть опечатка, потому что в скрипте нет слова «selected». Пожалуйста, проверьте его и перейдите по ссылке в ответе. Я добавляю в него демонстрационный пример.
ramwin

"selected" - это название моей модели. если я перепишу ваш код, мое предупреждение станет "ключом не определено"
hphp

37

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

<select name="LeaveType" onchange="onChange(this.value)" class="form-control">
 <option value="1">Annual Leave/ Off-Day</option>
 <option value="2">On Demand Leave</option>
</select>

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

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

<select name="LeaveType" @change="onChange($event)" class="form-control">
 <option value="1">Annual Leave/ Off-Day</option>
 <option value="2">On Demand Leave</option>
</select>

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

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

<select v-model="selectedValue" name="LeaveType" onchange="onChange(this.value)" class="form-control">
 <option value="1">Annual Leave/ Off-Day</option>
 <option value="2">On Demand Leave</option>
</select>

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

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


Когда я выполняю вторую ошибку в vuejs, я получаю следующую ошибку: Uncaught TypeError: Невозможно прочитать свойство 'apply' of undefined
TheDevWay

Я нигде в Кодексе не использовал «применить». Не могли бы вы поделиться кодом, в котором возникает ошибка?
santanu bera

23

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

const app = new Vue({
  el: "#app",
  data: function() {
    return {
      message: "Vue"
    }
  },
  methods: {
    onChange(event) {
      console.log(event.target.value);
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <select name="LeaveType" @change="onChange" class="form-control">
   <option value="1">Annual Leave/ Off-Day</option>
   <option value="2">On Demand Leave</option>
</select>
</div>


6

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

<template>
    <select name="LeaveType" v-model="leaveType" @change="onChange()" class="form-control">
         <option value="1">Annual Leave/ Off-Day</option>
         <option value="2">On Demand Leave</option>
    </select>
</template>

<script>
export default {
    data() {
        return {
            leaveType: '',
        }
    },

    methods: {
        onChange() {
            console.log('The new value is: ', this.leaveType)
        }
    }
}
</script>

Как добавить вводимый текст в зависимости от выбранной опции?
Angel

0

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

Что-то типа:

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

Обратите внимание, что наблюдатели стоят дорого. Вышеупомянутое также может быть получено как вычисляемое свойство, которое намного дешевле.
Рамеш Парик
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.