Vue.js在点击服务器上发送数据

Question

我有这个

<f7-list form>
<!-- Textarea -->
  <f7-list-item>
   <f7-input type="textarea" placeholder="Default address" id="address"></f7-input>
  </f7-list-item>
</f7-list>
<!-- Button Nex -->
<f7-block>
  <f7-button class="" value="1" id="btnPageAdress" href="/step1/">Next</f7-button>
</f7-block>

<script>
    export default {
      }
    }
</script>

我需要在点击按钮（#btnPageAdress）时从textarea向服务器发送数据（地址）。 （我刚开始学习Vue，并尝试谷歌，但或不适合或复杂的选项） 有人能帮助我吗？

我找到了[https://jsfiddle.net/sh70oe4n/]

我这样做

<f7-block id="addressBox">
  <f7-list form id="address-form">
    <!-- Textarea -->
  <f7-list-item>
  <f7-input type="textarea" placeholder="Default address" id="address"  ref="addressArea"></f7-input>
  </f7-list-item>
  </f7-list>
  <!-- Button Nex -->
  <f7-block>
  <f7-button class="" value="1" id="btnPageAdress" href="#" @click.prevent="getFormValues()">Next</f7-button>
  </f7-block>
  </f7-block>

在Vue.js

  // My Vue JS
  new Vue({
    el: '#addressBox',
      data: {
            address: ''
        },
      methods: {
        getFormValues () {
          this.address = this.addressArea.value,
          console.log(this.address)
        }
      }

  })

但仍然无效