如何将数据从 <template> 中的 <layout> 传递到 Vue 中导出默认值的方法？答案

【问题标题】：How do I pass data from <layout> in <template> to a method in my export default in Vue?如何将数据从 <template> 中的 <layout> 传递到 Vue 中导出默认值的方法？
【发布时间】：2021-07-13 01:39:07
【问题描述】：

我正在尝试将 HTML 文本输入中的文本收集到我的 Vue 文件的方法部分，但似乎无法弄清楚。我花了几个小时研究 v-model 并弄乱它，但是，我要么做错了，要么它没有按照我的想法做。这是我的代码：

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

我试图在单击提交按钮时将用户输入到 queryBox 中的任何内容发送到 logSomething() 方法。提前感谢您的帮助！

【问题讨论】：

标签： javascript python html django vue.js

【解决方案1】：

您可以使用 v-model 并映射您的 queryText 变量，该变量将包含您的输入字段数据。然后在点击时，使用事件并提交不加载表单，只是为了避免加载页面。

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

【讨论】：