Vue.js otrzymuje wybraną opcję na @change

108

Po pierwsze, chcę powiedzieć, że jestem nowy w Vue i jest to mój pierwszy projekt, w którym Vue jest używany. Mam combobox i chcę zrobić coś innego w oparciu o wybrany combobox. Używam osobnego pliku vue.html i maszynopisu. Oto mój kod.

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

a oto mój plik ts

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

Jak uzyskać wybraną wartość opcji w mojej funkcji maszynopisu? Dzięki.

javascript html asp.net-mvc vue.js hphp
źródło

Odpowiedzi:

200

Służy v-modeldo wiązania wartości wybranej opcji. Oto przykład .

<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>

Więcej informacji można znaleźć tutaj .

ramwin
źródło
1
pojawia się błąd „klucz nie jest zdefiniowany”. czy muszę najpierw zdefiniować model v? jeśli tak, to jak?
hphp
Tak, możesz ustawić dowolną nazwę, aby zastąpić klucz. Ale upewnij się, że jest to właściwość danych.
ramwin
Nadal nie rozumiem. Wiem, że mogę zmienić jego nazwę na dowolną, ale pojawia się ostrzeżenie „[Ostrzeżenie Vue]: Właściwość lub metoda„ wybrana ”nie jest zdefiniowana w instancji, ale odwołuje się do niej podczas renderowania. Upewnij się, że to właściwość jest reaktywna, albo w opcji danych, albo w przypadku komponentów opartych na klasach, przez zainicjowanie właściwości "
hphp
Być może w Twoim skrypcie jest literówka, ponieważ w skrypcie nie ma słowa „wybrane”. Sprawdź to i zapoznaj się z linkiem w odpowiedzi. Dodam w nim przykład demo.
ramwin
„Wybrano” to nazwa mojego modelu. jeśli przepiszę twój kod, moje ostrzeżenie zmieni się na „klucz” nie jest zdefiniowany
hphp
38

@ jest opcją skrótu do v-on . Użyj @ tylko wtedy, gdy chcesz wykonać niektóre metody Vue. Ponieważ nie wykonujesz metod Vue, zamiast tego wywołujesz funkcję javascript, musisz użyć atrybutu onchange, aby wywołać funkcję 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);
}

Jeśli chcesz wywołać metody Vue, zrób to w ten sposób-

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

Możesz użyć atrybutu danych modelu v na elemencie select, aby powiązać wartość.

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

Mam nadzieję że to pomoże :-)

santanu bera
źródło
Gdy wykonuję drugi w vuejs, pojawia się następujący błąd: Uncaught TypeError: Cannot read property 'apply' of undefined
TheDevWay
Nigdzie w Kodeksie nie użyłem słowa „aplikuj”. Czy mógłbyś udostępnić kod, w którym otrzymujesz błąd?
santanu bera
23

Zmieniona wartość będzie w 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/[email protected]/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>
Rozwiń fragment

Agney
źródło
8

Możesz także użyć modelu V do pomocy

<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>
Merhawi Fissehaye
źródło
Jak dołączyć tekst wejściowy, zależy od wybranej opcji?
Anioł
0

Możesz zapisać @ change = "onChange ()" i używać obserwatorów. Vue oblicza i zegarki, jest do tego zaprojektowany. W przypadku, gdy potrzebujesz tylko wartości, a nie innych złożonych atrybutów zdarzenia.

Coś jak:

  ...
  watch: {
    leaveType () {
      this.whateverMethod(this.leaveType)
    }
  },
  methods: {
     onChange() {
         console.log('The new value is: ', this.leaveType)
     }
  }
biojazzard
źródło
Należy pamiętać, że obserwatorzy są drogie. powyższe można również uzyskać jako właściwość obliczoną, która jest znacznie tańsza.
Ramesh Pareek