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

看起来您可能正在使用该值，并且稍后将使用它来创建Moment对象...可能只是更容易使用Date / 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>

Answer 2

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

在Vuejs2中的select标签中计算v模型

2 个答案: