옵션이 개체 배열인 경우 vue-다중 선택 옵션을 미리 선택하는 방법

옵션이 개체 배열인 경우 vue-다중 선택 옵션을 미리 선택하는 방법

다음에 의해 생성된 선택 드롭다운에서 특정 값을 미리 선택하려는 경우vue-multiselect.
다음과 같은 간단한 문자열 배열만 있으면 이 기능이 제대로 작동하도록 할 수 있다.

['Test 1', 'Test 2', 'Test 3']

하지만 여러 가지 물건을 사용할 때, 나는 이것을 작동시킬 수 없다.예를 들어 다음과 같은 경우:

<v-multiselect :options="[{id: 1, name: 'Test 1'}, {id: 2, name: 'Test 2'}, {id: 3, name: 'Test 3'}]"
               label="name"
               track-by="id"
               v-model="test">
</v-multiselect>

내가 무엇을 설정하든testv-model이 연결되어 있는 데이터 속성은 값을 미리 선택하지 않는다.노력했다1,2,3,'1','2'그리고'3'을 위해test할 때track-by이다id그리고'Test 1', 등(는) 다음과 같은 경우)track-by이다name하지만 아무 것도 효과가 없는 것 같다.

내가 여기서 뭘 잘못하고 있는 거지?https://vue-multiselect.js.org/#sub-sub-single-select-object에서 문서를 살펴보았지만, 옵션의 객체 배열 값을 미리 설정하려는 경우에는 예를 제공하지 않는 것 같다.구글링도 내가 찾고 있는 것을 돌려주지 않았다.

관련 항목에서 이 작업을 수행하면 구성 요소를 다음으로 설정할 때 여러 값을 선택하려면 무엇을 변경해야 하는가?multiple고마워

track-by사용법

문서에는 다음과 같은 내용이 표시된다.track-by"물체를 비교하는 데 사용된다. 옵션이 개체인 경우에만 사용하십시오."

즉, 에서 개체 값을 비교할 때 사용할 개체 키를 지정한다.options문서들은 실제로 다음과 같이 진술해야 한다.track-by다음과 같은 이유로 옵션이 개체인 경우 필요함<vue-multiselect>사용하다track-by 드롭다운에서 선택한 옵션을 결정하고 다중 선택 항목에서 선택한 옵션을 적절하게 제거하십시오.

없는track-by에서는 개체 구성을 위한 두 가지 버기 동작을 볼 수 있다. (1) 사용자는 이미 선택된 옵션을 다시 선택할 수 있으며, (2) 선택한 옵션을 제거하려고 하면 대신 모든 옵션이 다시 선택된다.

초기 값 설정

<vue-multiselect>값 배열 자동 변환은 지원하지 않지만 상위 구성 요소에서 쉽게 변환할 수 있다.

1. 지정할 로컬 데이터 속성 생성track-by초기 다중 선택 값(예: 이름 지정)trackBy그리고initialValues각각 ,:

   export default {
     data() {
       return {
         //...
         trackBy: 'id',
         initialValues: [2, 5],
       }
     }
   }
   

2. 묶다<vue-multiselect>.track-by로this.trackBy그리고<vue-multiselect>.v-model로this.value:

   <vue-multiselect :track-by="trackBy" v-model="value">
   

3. 감시자 만들기this.initialValues이 값을 다음 기준에 따라 개체 배열로 매핑할 수 있는this.trackBy설정this.value그 결과:

   export default {
     watch: {
       initialValues: {
         immediate: true,
         handler(values) {
           this.value = this.options.filter(x => values.includes(x[this.trackBy]));
         }
       }
     }
   }
   

Vue.component('v-multiselect', window.VueMultiselect.default);

new Vue({
  el: '#app',
  data () {
    return {
      trackBy: 'id',
      initialValues: [5,2],
      value: null,
      options: [
        { id: 1, name: 'Vue.js', language: 'JavaScript' },
        { id: 2, name: 'Rails', language: 'Ruby' },
        { id: 3, name: 'Sinatra', language: 'Ruby' },
        { id: 4, name: 'Laravel', language: 'PHP' },
        { id: 5, name: 'Phoenix', language: 'Elixir' }
      ]
    }
  },
  watch: {
    initialValues: {
      immediate: true,
      handler(values) {
        this.value = this.options.filter(x => values.includes(x[this.trackBy]));
      }
    }
  }
})

<script src="https://unpkg.com/vue@2.6.6/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">

<div id="app">
  <v-multiselect :track-by="trackBy"
                 :options="options"
                 v-model="value"
                 label="name"
                 multiple>
  </v-multiselect>
  <pre>{{ value }}</pre>
</div>

벌레 같은데?해결 방법은 에 대한 실제 참조를 사용하는 것이다.object

Vue.component('v-multiselect', window.VueMultiselect.default);
let testOptions=[{id: 1, name: 'Test 1'}, {id: 2, name: 'Test 2'}, {id: 3, name: 'Test 3'}]
new Vue({
  el: '#app',
  data: function () {
    return {
      test: testOptions[1], // <- use an object ref here!
      testOptions
    };
  }
});

내가 알아낸 가장 쉬운 방법은 BE에서 모든 물체를 보내는 것이고, 그래서 그것은 미리 선택된다.BE에서 동일한 객체를 보내면 사전 선택된다.하지만 네 선택사항이 FE에서 하드코드로 되어 있는지 아니면 데이터베이스 같은 것에서 온 것인지 모르겠다.나는 같은 문제가 있었지만 나의 가치관은 데이터베이스에서 나왔기 때문에 그 대상을 쉽게 재현할 수 있었다.

참조URL: https://stackoverflow.com/questions/54794648/how-do-i-preselect-a-vue-multiselect-option-when-options-is-an-array-of-objects