Отображать переменную js в html, используя 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>
1 ответ
Решение
Вы должны сохранить результат из Axios в переменную-член (например, "result"), а затем использовать синтаксис усов для интерполяции этой переменной в ваш шаблон:
<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();
});
}
}
});