Vue 라이브러리 선택을 사용하여 vue 선택 필드에 여러 레이블을 표시하는 방법

Vue 라이브러리 선택을 사용하여 vue 선택 필드에 여러 레이블을 표시하는 방법

나는 아래와 같이 vue Select 라이브러리에서 vue 선택 구성 요소를 html 형식으로 사용하고 있는데, 라벨에 세 가지 값을 표시하고 싶은데 어떻게 해야 할지 모르겠어. 설명서에서 해결책을 찾을 수 없었어.

아래와 같이 라벨에 3개의 값을 표시하고자 한다.

    <v-select id="selected_item" name="selected_item" title="Select an item" :options="formfieldsdata.items" :reduce="item_name => item_name.id" label="item_name+'::'+item_code+'::'+item_created_at" v-model="item.selected_item" @input="getSelectedItem"  style="width: 100%; height:56px;" />

HTML:

     <script src="{{ asset('assets/requiredjs/vue-select.js') }}"></script>
     <link href="{{ asset('assets/requiredcss/vue-select.css') }}" rel="stylesheet">

    <v-select id="selected_item" name="selected_item" title="Select an item" :options="formfieldsdata.items" :reduce="item_name => item_name.id" label="item_name" v-model="item.selected_item" @input="getSelectedItem"  style="width: 100%; height:56px;" />

JS:

    Vue.component('v-select', VueSelect.VueSelect);

    var app = new Vue({
        el: '#app',
        data: {

        formfieldsdata: {

                items: [],

            },

        item: {
                selected_item: 0,
            },

        }

        });

vue 선택 라이브러리 설명서 참조: https://vue-select.org/guide/values.html#transforming-selections

JavaScript 문자열에 식을 포함시킬 수 있는 템플릿 리터럴을 사용하십시오.그리고 라벨을 바인딩하도록 한다.:label

 <v-select id="selected_item" name="selected_item" title="Select an item" :options="formfieldsdata.items" :reduce="item_name => item_name.id" :label="`${item_name} ${item_code} ${item_created_at}" v-model="item.selected_item`" @input="getSelectedItem"  style="width: 100%; height:56px;" />

갱신하다 label하나의 객체 속성에만 사용할 수 있다.그러나 옵션과 선택한 값에 대한 범위를 사용할 수 있다.코드펜의 예

<v-select id="selected_item" name="selected_item" title="Select an item" :options="formfieldsdata.items" :reduce="item_name => item_name.id"  v-model="item.selected_item" @input="getSelectedItem"  style="width: 100%; height:56px;" >


   <template slot="option" slot-scope="option">
       <span :class="option.icon"></span>
       {{ option.item_name }} {{option.item_code}} {{option.created_at}}
   </template>
   <template slot="selected-option" slot-scope="option">
       <span :class="option.icon"></span>
       {{ option.item_name }} {{option.item_code}} {{option.created_at}}
   </template>
</v-select>

업데이트 2 다중 속성 검색 vue-선택

부에 성분의

 <div id="app">
  <h1>Vue Select - Multiple properties</h1>
  <v-select :options="options" label="item_data"
   v-model="selected">
  </v-select>
</div>

부호화하다

Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: '#app',
  data: {
    options: [
      {
          title: 'Read the Docs',
          icon: 'fa-book',
          url: 'https://codeclimate.com/github/sagalbot/vue-select'
        },
        {
          title: 'View on GitHub',
          icon: 'fa-github',
          url: 'https://codeclimate.com/github/sagalbot/vue-select'
        },
        {
          title: 'View on NPM',
          icon: 'fa-database',
          url: 'https://codeclimate.com/github/sagalbot/vue-select'
        },
        {
          title: 'View Codepen Examples',
          icon: 'fa-pencil',
          url: 'https://codeclimate.com/github/sagalbot/vue-select'
        }
    ]
  }
})

참조URL: https://stackoverflow.com/questions/57055428/how-to-display-multiple-labels-in-vue-select-field-using-vue-select-library