v-select 값을 동적으로 설정하는 방법

v-select 값을 동적으로 설정하는 방법

마이뷰티v-select요소는 다음과 같습니다.

<v-select
   v-bind:items="languages"
   v-model="setLocale"
   label="Language:"
   auto prepend-icon="map"
   item-value="fetchedLocale"
   hide-details
   id="langSelect"
   >

인data다음 항목을 참조할 수 있습니다.

data () {
  return {
    languages: [
      { shortCode: 'en', text: 'English' },
      { shortCode: 'pl', text: 'Polski' },
      { shortCode: 'es', text: 'Español' },
      { shortCode: 'pt', text: 'Portugues' }
    ],
    fetchedLocale: '',
    setLocale: null
  }
}, (...)

약간의 처리 후fetchedLocale일부의 가치를 얻다text"Portugues"와 같이 위 배열의 속성을 표시합니다.

질문: 업데이트 방법v-select그렇게 해서fetchedLocaleDOM 요소를 로드할 때 기본 빈 값을 설정하지 않고 "Portuges" 전에 설명한 바와 같이 의 값을 사용할 수 있습니까?

매뉴얼에 따르면item-valueprop는 각 항목의 값으로 사용할 속성 이름을 정의합니다.이 소품의 기본값은 다음과 같습니다.'value'(즉,value기본적으로 각 항목의 속성이 각 항목의 값으로 사용됩니다.로 설정하면text예를 들어, 그 다음에text각 소유물의languages해당 항목의 값으로 사용됩니다.그러나 실제로 선택한 구성 요소의 값이 설정되지는 않습니다.

선택한 컴포넌트의 값이 이미 바인딩되어 있습니다.setLocale경유로v-model따라서 선택한 컴포넌트의 값을 다음 컴포넌트로 변경할 경우fetchedLocale값, 업데이트만setLocale의 가치와 함께fetchedLocale컴포넌트가 갱신됩니다.

this.setLocale = this.fetchedLocale

다음으로 작업 예를 제시하겠습니다.

new Vue({
  el: '#app',
  data() {
    return {
      languages: [
        { shortCode: 'en', text: 'English' },
        { shortCode: 'pl', text: 'Polski' },
        { shortCode: 'es', text: 'Español' },
        { shortCode: 'pt', text: 'Portugues' }
      ],
      fetchedLocale: '',
      setLocale: null
    };
  },
  created() {
    setTimeout(() => {
      this.fetchedLocale = 'English';
      this.setLocale = this.fetchedLocale;
    }, 1000);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<script src="https://unpkg.com/vuetify@0.15.7/dist/vuetify.js"></script>
<link href="https://unpkg.com/vuetify@0.15.7/dist/vuetify.min.css" rel="stylesheet"/>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">

<div id="app">
  <v-app>
    <v-select
      :items="languages"
      v-model="setLocale"    
      label="Language:"
      auto prepend-icon="map"
      item-value="text"
      hide-details
      id="langSelect"
    ></v-select>
  </v-app>
</div>

언급URL : https://stackoverflow.com/questions/46369200/how-to-set-v-select-value-dynamically