VueJ에서 선택한 인덱스를 감지하는 방법

VueJ에서 선택한 인덱스를 감지하는 방법

나는 이것을 가지고 있다.VueJS코드:

new Vue({
    el: '#app',
    data: {
        model: [
            { name: 'a', price: 1.00 },
            { name: 'b', price: 2.00 },
            { name: 'c', price: 3.00 },
        ],
        actived: {}
    },
    methods: {
       setActive: function(model) {
           this.actived = model;
       }
    }
});

다음 HTML 코드를 사용합니다.

<select v-on:change="setActive(models[n])">
    <option v-for="n in 3">{{ n }}</option>
</select>

선택한 모델로 동작 데이터 값을 업데이트하고 싶습니다.예를 들어, 선택 필드의 두 번째 연산자를 사용자가 변경하는 경우, 두 번째 모델의 데이터를 액티브 값으로 전달하고 싶습니다.

선택한 옵션의 인덱스를 검출하는 방법이 있습니까?와 조합할 수도 있습니다.jQuery아니면 다른...?

다음과 같은 방법으로 달성할 수 있습니다.v-model에select선택한 값이 다음 사용자에게 전달됩니다.active소품:

new Vue({
  el: '#app',
  data: {
    model: [
        { name: 'a', price: 1.00 },
        { name: 'b', price: 2.00 },
        { name: 'c', price: 3.00 },
    ],
    active: {}
  }
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <select v-model="active"> // v-model
    <option :value="n" v-for="n in model">{{ n.name }}</option> // bind value
  </select>
  <p>{{ active }}</p>
</div>

루프를 통해model그 자체를 배열하고 요소를 바인드하다value의 특성option(이 값은 선택된 값으로 설정되며 다음으로 전달됩니다.active타고v-model).

언급URL : https://stackoverflow.com/questions/44582260/how-to-detect-selected-index-in-vuejs