How do I pass data from <layout> in <template> to a method in my export default in Vue?

Question

I'm trying to collect the text from a text input in HTML to the methods section of my Vue file but can't seem to figure it out. I've spent a couple hours researching v-model and messing around with it but, I was either doing it wrong or it doesn't do what I thought it did. Here's my code:

 <template> <div id="app"> <Layout> <input id="queryBox" placeholder="Enter your SQL query here." size="60"/> <br> <input type="submit" v-on:click="logSomething()"> </Layout> </div> </template> <script> export default { data: () => { return { queryText: "" } }, methods: { logSomething() { console.log(this.queryBox) } } } </script>

I'm trying to send whatever the user inputs into queryBox to the logSomething() method upon the click of the submit button. Thanks in advance for any help!

Answer 1

You can use the v-model and map your queryText variable that will contain your input field data. And then on click, use the event and make the submit not to load form, just to avoid load page.

<template>
  <div id="app">
    <Layout>
      <input id="queryBox" v-model="queryText" placeholder="Enter your SQL query here." size="60"/>
      <br>
      <input type="submit" v-on:click="logSomething">
    </Layout>
  </div>
</template>

<script>
  export default {
    data: () => {
      return {
        queryText: ""
      }
    },
    methods: {
      logSomething(e) {
        e.preventDefault()
        console.log(this.queryText)
      }
    }
  }
</script>