#vue.js #computed-properties #v-model
#vue.js #вычисляемые свойства #v-модель
Вопрос:
Я хочу получить атрибут из объекта для вычисления, но, насколько мне известно, это не поддерживается.
Я пытался использовать что-то вроде objects.atributes:{ /*codes */ }
, но получил ошибки.
Я хочу добиться чего-то подобного:
<template>
<div class="form">
<form>
<div class="form-group">
<label>First Name : </label>
<input type="text" v-model="firstName" name="firstname" class="form-control">
</div>
<div class="form-group">
<label>Last Name : </label>
<input type="text" v-model="lastName" name="lastname" class="form-control">
</div>
<div class="card text-center">
Full name is: {{ formdata.fullname }}
</div>
</form>
</div>
</template>
<script>
export default {
data(){
return {
firstName:'',
lastName:'',
formdata:{
computed:{
fullname:{
get:function(){
return this.firstName ' ' this.lastName
}
}
}
},
}
},
/* I have tried this too, and got syntax error
computed:{
formdata.fullname{
get:function(){
return this.firstName ' ' this.lastName
}
}
}
*/
}
</script>
Я ожидал, что появится полное имя, но этого не произошло.
Ответ №1:
Вычисляемые свойства определяются вне объекта данных. Сделайте это так:
export default {
data() {
return {
firstName:'',
lastName:'',
}
},
computed: {
fullname: function() {
return this.firstName ' ' this.lastName;
}
}
}
<div class="card text-center">
Full name is: {{ fullname }}
</div>
Комментарии:
1. Есть ли какой-либо способ разместить его в объекте? так что я могу получить к нему доступ, как
formdata.fullname
? Потому что я буду обрабатывать данные различными способами.