输入完成后滚动到div

Question

我有一个有三个步骤的表格，并且想要 实现这样的效果：当用户完成每个步骤时，下一步向上滚动到视图中。 我怎样才能做到这一点？我正在使用VUEJS 2.5.2。我删除了一些HTML以使其更清晰，更清晰。 任何人都可以帮助解决方案吗？ 到目前为止我的代码是：

<template>
  <div id="app">
      <form action="" method="post">
        <div id="step1"  v-show="quote.location === 'home'">
          <select v-model="brand">
            <option value="" selected disabled hidden>Select brand</option>
            <option v-for="(car, index) in cars">{{ index }}</option>
          </select>
          <select v-model="model">
            <option value="" selected disabled hidden>Select model</option>
            <option v-for="option in cars[brand]" :value="option.prize">{{ option.prize }}</option>
          </select>
        </div><!--/step1-->
        <div id="step2" v-show="brand && model != ''">
          <h2><span class="text">Do you need an installer?</span></h2>
          <div class="location">
            <div class="selection">
              <input type="radio" id="yesInstaller" name="yesInstaller" value="Yes" v-model="quote.installer">
              <label for="yesInstaller">Yes</label>
            </div>
            <div class="selection">
              <input type="radio" id="noInstaller" name="noInstaller" value="No" v-model="quote.installer">
              <label for="noInstaller">No</label>
            </div>
          </div>
        </div><!--/step2-->
        <div id="step3" v-show="quote.installer != ''">
          <h2><span class="text">Right on! Here’s an overview of your selection.</span></h2>
        </div><!--/step2-->
      </form>

  </template>
  <script>
  export default {
    name: 'Quote',
    data () {
      return {
        totalSteps: 4,
        currentStep: 1,
        show: true,
        brand: '',
        model: '',
        cars: {
          'BMW': [ { size:'1', prize:'BMW i3' }, { size:'2',prize:'BMW i8' }, { size:'3',prize:'BMW 740e' } ],
          'AUDI': [ { size:'1', prize:'Audi A3 E-Tron' },{ size:'2', prize:'Audi Q7 E-Tron' } ],
          'Chevrolet': [ { size: '1', prize:'Chevrolet Bolt'}, {size:'1', prize:'Chevrolet Volt' } ],
          'Fiat': [ { size: '1', prize:'Fiat 500e'}]
        }
      }
    }
  }
  </script>