vue-component - 在 Vuejs2 的 select 标签中计算 v-model

Question

我有一个组件，其标记是

<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');
        }
      }
    }
   ........

我可以使用计算属性作为模型吗？计算属性会触发数据属性的更新吗？

Answer 1

如果您需要在选择更改时更新 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>