如何在 vuejs 中使用一个输入来控制另一个输入

Question

如果评估费输入具有键入的值，我需要找到一种方法，基本上在评估期间输入中显示“每月”。

我已经尝试过绑定和组件，但无法成功。

            <div class="col-lg-6">
              <div class="form-group">
                <label>Assessment Fee <span class="note">C</span></label>
                <input type="text" class="form-control" v-model="document.assessments_fee" placeholder="$">
              </div>
            </div>
            <div class="col-lg-6">
              <div class="form-group">
                <label>Assessment Period <span class="note">C</span></label>
                <input type="text" class="form-control" v-model="document.assessments_period" placeholder="(per month/quarter/etc.)">
              </div>
            </div>



  data() {
    return {
      now: new Date().toISOString(),
      document: {
        assessments_fee: '',
        assessments_period: '',
      }
    }
  },



      components: {
        assessments_fee: function() {
          if(this.assessments_fee != null || '') this.assessments_period = "per Month";
        }
      },

Answer 1

您可以为assessments_fee 创建一个观察者，所以当它不是null assessments_period= 'per Month' 时。

你可以这样做：

new Vue({
  el: '#app',
  data() {
    return {
      now: new Date().toISOString(),
      document: {
        assessments_fee: '',
        assessments_period: '',
      }
    }
  },
  computed: {
    assessmentsFee() {
      return this.document.assessments_fee
    }
  },
  watch: {
    assessmentsFee() {
      this.document.assessments_fee ?
      this.document.assessments_period = "per Month" :
      this.document.assessments_period = ""
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="col-lg-6">
    <div class="form-group">
      <label>Assessment Fee <span class="note">C</span></label>
      <input type="text" class="form-control" v-model="document.assessments_fee" placeholder="$">
    </div>
  </div>
  <div class="col-lg-6">
    <div class="form-group">
      <label>Assessment Period <span class="note">C</span></label>
      <input type="text" class="form-control" v-model="document.assessments_period" placeholder="(per month/quarter/etc.)">
    </div>
  </div>
</div>