Vue.js send data on click to server

Question

I have this

<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>

And I need to send data (address) from textarea to server on button click (#btnPageAdress). (I just started to learn Vue, and tried to google it, but or something that does not fit or complex options) Can someone help me?

I found [https://jsfiddle.net/sh70oe4n/]

and i do this

<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>

In Vue.js

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

  })

But still does not work

You need an http library to send https requests to a server. For that you must use http or better one axios — samayo
– samayo, Commented Nov 28, 2017 at 15:10

tony19 · Accepted Answer · 2022-07-15 00:47:51Z

4

<div id="address-form">
  <textarea v-model="address"></textarea>
  <button v-on:click="sendAddress()">Send</button>
</div>

<script>
  export default {
    el: '#address-form',
    data() {
      return {
        address: ''
      }
    },
    methods: {
      sendAddress: function () {
        var addressToSend = this.address
        //http request to server here
      }
    }
  }
</script>

Documentation for VueJS event handling: https://v2.vuejs.org/v2/guide/events.html

Note: I haven't tested the code so there could be some errors.

edited Jul 15, 2022 at 0:47

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 28, 2017 at 15:26

jreijt

414 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js send data on click to server

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related