Vuejs2의 선택 태그에서 계산된 v-model

Vuejs2의 선택 태그에서 계산된 v-model

마크업이 다음과 같은 컴포넌트가 있습니다.

<select id="create-claim-start_date" type="text" class="form-control" v-model="startPeriod">
                                  <option value="0">January</option>
                                  <option value="3">April</option>
                                  <option value="6">July</option>
                                  <option value="8">October</option>
                                </select>

어디에startPeriod계산된 속성입니다.

..........
data() {
   return { form: { claim_start_date: null } }
},
computed: {
      startPeriod: {
        get: function(){
          var d = window.moment();
          return d.get('month');
        },
        set: function(p) {
          var dt = window.moment()
          dt.set(p,'month');
          this.form.claim_start_date = dt.get('YYYY-mm-dd');
        }
      }
    }
   ........

계산된 속성을 모델로 사용할 수 있습니까?계산된 속성이 데이터 속성 업데이트를 트리거합니까?

값을 갱신할 필요가 있는 경우claim_start_date선택이 변경되면 워처를 사용할 수 있습니다.

다음은 예를 제시하겠습니다.

var app = new Vue({
  el: '#app',
  data: {
    startPeriod: '0',
    form: {
      claim_start_date: 'defaultValue'
    }
  },

  watch: {
    startPeriod: function(newValue, oldValue) {
      this.form.claim_start_date = "new value " + newValue;
    }
  }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment.min.js"></script>   

<div id="app">
  <select id="create-claim-start_date" type="text" class="form-control" v-model="startPeriod">
    <option value="0">January</option>
    <option value="3">April</option>
    <option value="6">July</option>
    <option value="8">October</option>
  </select>

  {{form.claim_start_date}}

</div>

이 값을 사용하고 있는 것 같고, 나중에 이 값을 사용하여 Moment 개체를 만들 예정입니다.우선 옵션 값에 날짜/순간 개체를 사용하는 것이 더 쉬울 수 있습니까?

javascript 값(오브젝트)을 옵션 값에 바인딩할 수 있습니다.날짜를 모르기 때문에 날짜 설정 방법을 조정해야 할 수도 있습니다.

<select id="create-claim-start_date" class="form-control" v-model="startPeriod">
    <option :value="moment('2016-01-01')">January</option>
    <option :value="moment('2016-04-01')">April</option>
    <option :value="moment('2016-07-01')">July</option>
    <option :value="moment('2016-10-01')">October</option>
</select>

언급URL : https://stackoverflow.com/questions/40875969/computed-v-model-in-select-tag-in-vuejs2