Vue:在函数中使用输入值
Vue:在函数中使用输入值
提问于 2019-03-18 23:23:51
我使用的是Single File Components，并且我有一个具有输入框的modal组件，但我无法使用v-modal名称在下面的函数中获取输入值。它总是返回“名称未定义”。我是否错误地使用了v-model属性？
<template>
<input v-model="name" class="name"></input>
</template>
<script>
export default {
methods: {
applyName() {
let nameData = {{name}}
}
}
}
</script>回答 3
Stack Overflow用户
发布于 2019-03-18 23:36:12
您是对的，您错误地使用了v-model属性。
首先，您需要使用数据在组件中定义一段状态：
export default {
data: () => ({
name: '',
}),
methods: {
log() {
console.log(this.name);
}
}
}然后，您可以使用v-model="name"将这段数据绑定到组件中，就像您所做的那样。然而，如果你想在你的方法中访问这段状态，你应该在你的applyName()方法中使用this.name。
您的{{name}}语法用于访问模板中的数据，如下所示：
<template>
<span>
My name is: {{name}}!
</span>
</template>Stack Overflow用户
发布于 2019-03-18 23:35:06
你必须使用this指针来访问模型：
<template>
<input v-model="inputName" class="name"></input>
</template>
<script>
export default {
data() {
return {
inputName: '',
}
},
methods: {
applyName() {
// Notice the use of this pointer
let nameData = { name: this.inputName };
}
}
}
</script>Stack Overflow用户
发布于 2019-03-18 23:43:44
查看文档https://vuejs.org/v2/guide/forms.html#v-model-with-Components
在模板中，您按名称引用数据、计算或方法。在本例中，它指的是数据。当输入更改名称时，数据就会更新。
可以在引用这一点的函数中使用。
<template>
<input v-model="name" class="name"></input>
</template>
<script>
export default {
data() {
return { name: '' }
},
methods: {
applyName() {
let nameData = this.name
}
}
}
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55224680
复制相关文章
相似问题
腾讯云开发者
