[英]display js variable to html using vue js
我如何使用 vue.js 将名字、姓氏等显示到数据中
我在 getData 函数中有数据，所以我必须在 getData 函数旁边的数据中显示。 那么我如何在数据数组中显示名字、姓氏等变量，目前我正在传递空白数组来显示，我必须传递通过 getData 函数获得的值
JS文件
Vue.use(VeeValidate);
var getData = function(){
axios.get('/api/getdataofmember')
.then(function (response) {
console.log(response.data.data);
var firstname = response.data.data.firstname;
var lastname = response.data.data.lastname;
});
}();
const signupForm = new Vue({
el: '#signup-form',
data : {
firstname : '',
lastname :'',
email : '',
password : '',
mobilenumber : '',
date :''
},
methods: {
processForm: function() {
//attempt validating all
this.$validator.validateAll().then((result) => {
if(result){
var result1 = {
'firstname' : this.firstname,
'lastname' : this.lastname,
'email' : this.email,
'password' : this.password,
'mobile_no' : this.mobilenumber,
'dob' : moment(this.date).format('YYYY-MM-DD')
}
axios.post('/api/editmemberpro',result1)
.then(function(response) {
var result = response.data;
var code=result.code;
console.log(code);
if(code==0)
{
document.getElementById("result").innerHTML = result.message;
}
else {
document.getElementById("result").innerHTML = result.message;
}
})
.catch(function (error) {
console.log(error);
});
}
this.firstname=this.lastname=this.email=this.password=this.mobilenumber=this.date="";
this.$validator.reset();
});
}
}
});
html文件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>addmember</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<!-- include the VeeValidate library -->
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// Notify vue about the VeeValidate plugin
Vue.use(VeeValidate);
</script>
<style>
.error {
color: red;
}
.success{
color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="row main">
<div class="main-login main-center">
<h3>Edit Member Profile</h3>
<form id="signup-form" @submit.prevent="processForm">
<table>
<div class="form-group">
<tr><td><label for="first name" >First Name : </label></td>
<td><input type="text" name="firstname" :class="{ 'form-control': true, 'is-danger': errors.has('firstname') }" v-model="firstname" v-validate="'required|alpha|min:2|max:20'"></td>
<td><span class="error" v-show="errors.has('firstname')">@{{ errors.first('firstname') }}</span></td></tr>
</div>
<div class="form-group">
<tr><td><label for="last name" >Last Name : </label></td>
<td><input type="text" name="lastname" :class="{ 'form-control': true, 'is-danger': errors.has('lastname') }" v-model="lastname" v-validate="'required|alpha|min:2|max:20'"></td>
<td><span class="error" v-show="errors.has('lastname')">@{{ errors.first('lastname') }}</span></td></tr>
</div>
<div class="form-group">
<tr><td><label for="email">Email : </label></td>
<td><input type="email" :class="{ 'form-control': true, 'is-danger': errors.has('email') }" name="email" v-model="email" v-validate="'required|email'" disabled></td>
<td><span class="error" v-show="errors.has('email')">@{{ errors.first('email') }}</span></td></tr>
</div>
<div class="form-group">
<tr><td><label for="password">Password : </label></td>
<td><input type="text" :class="{ 'form-control': true, 'is-danger': errors.has('password') }" name="password" v-model="password" v-validate="'required|min:6'"></td>
<td><span class="error" v-show="errors.has('password')">@{{ errors.first('password') }}</span></td></tr>
</div>
<div class="form-group">
<tr><td><label for="Mobile Number">Mobile Number : </label></td>
<td><input type="text" :class="{ 'form-control': true, 'is-danger': errors.has('mobilenumber') }" name="mobilenumber" v-model="mobilenumber" v-validate="{ required:true,numeric:true,min:10,max:10,regex:/^[6-9]\d{9}$/ }"></td>
<td><span class="error" v-show="errors.has('mobilenumber')">@{{ errors.first('mobilenumber') }}</span></td></tr>
</div>
<div class="form-group">
<tr><td><label for="DOB">Date of Birth : </label></td>
<td><input type="date" :class="{ 'form-control': true, 'is-danger': errors.has('date') }" name="date" v-model="date" v-validate="'required'"></td>
<td><span class="error" v-show="errors.has('date')">@{{ errors.first('date') }}</span></td></tr>
</div>
</table>
<div class="form-group ">
<button id="button" :disabled="errors.any()">Save</button>
</div>
</form>
<div id="result" class="success"> </div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="/js/memberprofile.js"></script>
</html>
您应该将 Axios 的结果存储到一个成员变量中（例如“result”），然后使用 mustache 语法将此变量插入到您的模板中：
<div id="result" class="success">{{ result }}</div>
Vue.use(VeeValidate);
function getData(obj)
{
axios.get('/api/getdataofmember')
.then(function (response)
{
console.log(response.data.data);
obj.firstname = response.data.data.firstname;
obj.lastname = response.data.data.lastname;
});
}(signupForm);
const signupForm = new Vue({
el: '#signup-form',
data : {
firstname : '',
lastname :'',
email : '',
password : '',
mobilenumber : '',
result: '', // <----- here you store the result
date :''
},
methods: {
processForm: function() {
//attempt validating all
this.$validator.validateAll().then((result) =>
{
if(result)
{
var result1 = {
'firstname' : this.firstname,
'lastname' : this.lastname,
'email' : this.email,
'password' : this.password,
'mobile_no' : this.mobilenumber,
'dob' : moment(this.date).format('YYYY-MM-DD')
}
axios.post('/api/editmemberpro',result1)
.then(function(response) {
var result = response.data;
var code=result.code;
console.log(code);
this.result = result.message; // <--- this command stores the result
})
.catch(function (error) {
console.log(error);
});
}
this.firstname=this.lastname=this.email=this.password=this.mobilenumber=this.date="";
this.$validator.reset();
});
}
}
});
使用Vue.js和Minimalect在HTML select中显示默认值
[英]Display a default value in HTML select using Vue.js and Minimalect
使用 Vue JS 将参数作为 Html 中的变量传递给模板的问题
[英]Issue on Passing param to Template as Variable in Html Using Vue JS
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.