Question

我正在使用“单个文件组件”，并且有一个模态组件，该组件具有输入框，但使用v模态名称无法在下面的函数中获取输入的值。由于“未定义名称”，它会不断返回。我是否错误地使用了v-model属性？

<template>
<input v-model="name" class="name"></input>
</template>

<script>
    export default {

        methods: {

           applyName() {
                let nameData = {{name}} 
           }
        }
     }
</script>

Answer 1

您是对的，您错误地使用了v-model属性。

首先，您需要使用数据在组件中定义一个状态：

export default {
  data: () => ({
    name: '',
  }),
  methods: { 
    log() {
      console.log(this.name);
    }
  }
}

然后，您可以像以前一样使用v-model="name"将这些数据绑定到组件中。但是，如果要在方法中访问此状态，则应在this.name方法中使用applyName()。

您的{{name}}语法用于访问模板中的数据，如下所示：

<template>
  <span>
    My name is: {{name}}!
  </span>
</template>

Answer 2

您必须使用onResume()指针来访问模型：

onPause()

Answer 3

查看文档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>

Vue：在函数

3 个答案: