Vuejs2 是否有任何方法可以在vuejs中的同一数据对象内使用数据属性?
我是Vue js以及前端框架的初学者。最近我了解了vue js。所以我在vue js中有一个很小的任务。简单地添加用户并显示我添加的所有用户。这是我的代码Vuejs2 是否有任何方法可以在vuejs中的同一数据对象内使用数据属性?,vuejs2,Vuejs2,我是Vue js以及前端框架的初学者。最近我了解了vue js。所以我在vue js中有一个很小的任务。简单地添加用户并显示我添加的所有用户。这是我的代码 <div id="todo"> <b-card class="col-md-12 text-center"> <b-row> <b-col md="4"> <b-input v-model="firstName" placeholde
<div id="todo">
<b-card class="col-md-12 text-center">
<b-row>
<b-col md="4">
<b-input v-model="firstName" placeholder="Firstname"></b-input>
</b-col>
<b-col md="4">
<b-input v-model="lastName" placeholder="Lastname"></b-input>
</b-col>
<b-col md="2">
<b-btn class="btn btn-success" @click="addUser">Add User</b-btn>
</b-col>
</b-row>
</b-card>
<table>
<caption>Users</caption>
<thead>
<tr>
<th>Index</th>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>
<tbody>
<tr v-for="(u, index) in users" :key="index">
<td>{{u.uid}}</td>
<td>{{u.firstname}}</td>
<td>{{u.lastname}}</td>
</tr>
</tbody>
</table>
</div>
<script>
export default {
name: "todo",
data() {
return {
users: [{ id: **this.uid**, firstname: "John", lastname: "Doe" }],
**uid**: 1,
firstName: "",
lastName: ""
};
},
methods: {
addUser() {
let newUser = {
id: this.id + 1,
firstname: this.firstName,
lastname: this.lastName
};
this.users.push(newUser);
(this.firstName = ""), (this.lastName = "");
}
}
};
</script>
添加用户
使用者
指数
名字
姓
{{u.uid}
{{u.firstname}
{{u.lastname}
导出默认值{
名称:“待办事项”,
数据(){
返回{
用户:[{id:*this.uid**,名字:“John”,姓氏:“Doe”},
**uid**:1,
名字:“,
姓氏:“
};
},
方法:{
addUser(){
让newUser={
id:this.id+1,
名字:这个,名字,
lastname:this.lastname
};
this.users.push(newUser);
(this.firstName=“”),(this.lastName=“”);
}
}
};
现在,我的问题是,我可以在数据对象的users数组中使用uid吗
您可以通过在created方法中运行代码,如下所示
{
created () {
let firstUser = { id: this.uid, firstname: "John", lastname: "Doe" }
this.users.push(firstUser)
},
data () {
users: [],
uid: 1
}
}
您可以在数据中使用它,如下所示:
<script>
const uid = 1;
export default{
data(){
return {
id : uid
}
}
}
</script>
常数uid=1;
导出默认值{
数据(){
返回{
id:uid
}
}
}