Vue 선택, v-for 및 v-model이 포함된 값 사전 선택

Vue 선택, v-for 및 v-model이 포함된 값 사전 선택

사용하고 있다.select와 함께v-model그리고 선택권을 가지고 있다v-for그리고 가치로써의 목적.옵션은 ID로 식별되는 일부 요소들이다.사용자 정의 동일성에 따라 옵션을 미리 선택하는 방법(이 경우 동일)id들판)?앵글제비 비슷한 것을 찾고 있다.track by로부터ng-options.

https://jsfiddle.net/79wsf1n4/5/

id가 같은 값으로 미리 선택한 입력을 만드는 방법?

템플릿:

<div id="vue-instance">
  <select v-model="selected">
    <option v-for="item in inventory" :value="item" :key="item.id">
      {{ item.name }}
    </option>
  </select>
  <p>
    {{ selected.id }}
  </p>
</div>

js:

var vm = new Vue({
  el: '#vue-instance',
  data: {
    inventory: [
      {name: 'MacBook Air', id: 1},
      {name: 'MacBook Pro', id: 2},
      {name: 'Lenovo W530', id: 3},
      {name: 'Acer Aspire One', id: 4}
    ],
    selected: {
        id: 2
    }
  }
});

Dharmendra의 답변에 따라 선택한 속성을 추가할 수 있다.

그러나 문제는 선택한 속성에 유효한 개체를 할당하지 않고 있다는 점이다.Vue는 옵션 목록에서 동일한 개체를 찾으려고 할 것이며, 개체 동일성 비교를 통해 이 작업을 수행할 것이다.

현재 나는 Vue에게 속성에 기초하여 초기 선택을 하도록 지시하는 것이 가능한지 알 수 없지만, 매우 간단한 해결책은 생성된 라이프사이클 콜백에서 직접 ID를 기반으로 선택한 속성을 할당하는 것이다.

var vm = new Vue({
  el: '#vue-instance',
  data: {
    inventory: [
      {name: 'MacBook Air', id: 1},
      {name: 'MacBook Pro', id: 2},
      {name: 'Lenovo W530', id: 3},
      {name: 'Acer Aspire One', id: 4}
    ],
    selected: 2
  },
  created: function() {
        this.selected = this.inventory.find(i => i.id === this.selected);
  }
});

네 피들 업데이트도 했어.

옵션에 값을 할당하는 방법을 변경해야 한다.이것을 바꾸다:value="item"로v-bind:value="item".

HTML 부품

<select class="form-control" name="template" v-model="selected">
    <option v-for="item in inventory" v-bind:value="item">
       {{ item.name }}
    </option>
</select>

JS 부분

new Vue({
  el: '#selector',
  data: {
    ...
    selected: {name: 'MacBook Pro', id: 2}
  }
})

여기 일하는 사람이 있다.

동작을 테스트하는 데 필요 없이 유용한 코드가 많이 있다(경우 설정 필요).initSelect와 함께id또는name) :

var vm = new Vue({
  el: '#vue-instance',
  data: {
    inventory: [
      {name: 'MacBook Air', id: 1},
      {name: 'MacBook Pro', id: 2},
      {name: 'Lenovo W530', id: 3},
      {name: 'Acer Aspire One', id: 4}
    ],
    initSelect : {
    	id: 2
    },
    selected: {},
  },
  created: function() {
    this.setSelectedWithInit();
  },
  methods: {
    setSelectedWithInit: function() {
      var firstKey = Object.keys(this.initSelect)[0],
      	  value = this.initSelect[firstKey];
      
      for( var i = 0, length = this.inventory.length; i < length; i++ ) {
      	if( (this.inventory[i].hasOwnProperty(firstKey))
         && (this.inventory[i][firstKey] === value) )
        {
          this.selected = this.inventory[i];
          return;
        }
      }
    },
    toggle: function() {//you don't need this method
      if( this.initSelect.hasOwnProperty('id') ) {
        this.initSelect = { name: 'Lenovo W530' };
      } else {
        this.initSelect = { id: 2 };
      }
    }
  },
  watch: {
    'initSelect': {
      handler: function (val, oldVal) {
        this.setSelectedWithInit();
      },
      deep: true
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.js"></script>

<div id="vue-instance">
  <select v-model="selected">
    <option v-for="item in inventory" :value="item" :key="item.id">
      {{ item.name }}
    </option>
  </select>
  <p>
    {{ initSelect.id }}
    {{ initSelect.name }}
  </p>
  
  <!-- You don't need the rest of the html below -->
  <button @click="toggle">Toggle id/name</button>
  
  <div v-if="initSelect.hasOwnProperty('id')">
    Id: <input v-model.number="initSelect.id" type="number">
  </div>
  
  <div v-else>
    Name: <input v-model="initSelect.name" type="text">
  </div>
  
  <br><br>
  {{ initSelect }}
</div>

참조URL: https://stackoverflow.com/questions/43366723/vue-preselect-value-with-select-v-for-and-v-model