从 Vue.js 中的文档元素获取值

Question

我正在为我的 SpringBoot 应用程序创建前端。要发送 Get 请求，我需要从程序中的输入获取值，但没有成功。

\n\n

选择后我尝试使用任何.value, valueOf(),方法之王.toString()document.getElementById("name")，但它们似乎都不起作用。

\n\n

// 元素

\n\n

<form class="pt-3">\n   <div class="form-group">\n      <label for ="name">Person ID</label>\n      <input\n         type="text"\n         id="name"\n         class="form-control is"\n         :class="{\'is-invalid\': $v.name.$error} "\n         @input="$v.name.$touch()"\n         v-model="name"\n         placeholder="123456"\n         value=""\n      >\n      <div class="invalid-feedback" v-if="!$v.name.minLength">ID must be at least 5 characters</div>\n      <button class="btn btn-secondary btn-lg btn-block" @click="FetchData">\xd0\x9d\xd0\xb0\xd0\xb9\xd1\x82\xd0\xb8</button>\n   </div>  \n</form>\n

\n\n

// 功能

\n\n

AddPerson: function () {\n    var nperson = document.getElementById("name").valueOf().value.name;\n    console.log(nperson);\n}\n

\n\n

我需要将用户输入的文本输出到页面上的名称行并将其发布到console.log().

\n\n

/// 添加

\n\n

data() {\n  return {\n    result: \'\',\n    name: \'\',\n    seats: \'\',\n    reservation: \'\'\n  }\n}\n

\n

Answer 1

由于您使用将输入值绑定到name属性v-model因此可以直接在方法中使用该属性，如下所示：

\n\n

 AddPerson: function () {\n     var nperson = this.name;\n   console.log(nperson);\n }\n

\n\n

并且name属性应该在您的数据对象中定义，例如：

\n\n

 data(){\n    return{\n          name:\'\',\n          ...\n        }\n     }\n

\n\n

并尝试text作为输入类型而不是name：

\n\n

<input type="text" ... \n

\n\n

完整示例

\n\n

\r\n

\r\n

 AddPerson: function () {\n     var nperson = this.name;\n   console.log(nperson);\n }\n

\r\n

 data(){\n    return{\n          name:\'\',\n          ...\n        }\n     }\n

\r\n

\r\n

\r\n

\n