[英]How do I pass data from <layout> in <template> to a method in my export default in Vue?
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.我试图从 HTML 中的文本输入中收集文本到我的 Vue 文件的方法部分,但似乎无法弄清楚。 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.
我花了几个小时研究 v-model 并弄乱它,但是,我要么做错了,要么它没有按照我的想法做。 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.我试图在单击提交按钮时将用户输入到 queryBox 中的任何内容发送到 logSomething() 方法。 Thanks in advance for any help!
提前感谢您的帮助!
You can use the v-model and map your queryText
variable that will contain your input field data.您可以使用 v-model 和 map 将包含您的输入字段数据的
queryText
变量。 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.