forms - vue.js:如何动态更改输入字段的值与其他内容的内容并仍在使用值?
问题描述
我有一个名字和一个姓氏输入字段,并希望在名称输入字段中连接两者,例如
<input id="firstName" :value"firstName" />
<input id="lastName" :value"lastName" />
<input id="name" :value"{{ firstName }} {{ lastName }}" readonly />
如果我修改了 firstName 或 lastName 字段的值,名称输入字段应该会更新结果。
我有一个脚本,它用来自 GET 请求的数据填充firstName
和字段。lastName
<script>
export default {
data () {
return {
data: {},
firstName: "",
lastName: "",
},
},
methods: {
getUser() {
this.$axios({method: 'get', url: 'http://127.0.0.1:8000/api/get_user/',
}).then(response => {
this.data = response.data;
this.firstName = this.data.firstName;
}
}
}
}
</script>
我知道我不能同时使用 ``v-bind and
v-model`。但是我怎么能解决这个问题呢?
解决方案
创建一个fullName
使用 getter/setter 调用的计算属性,然后将其绑定到v-model
:
computed: {
fullName: {
get(){
return this.firstName + ' ' + this.lastName;
},
set(val){
}
},
<input id="firstName" v-model="firstName" />
<input id="lastName" v-model="lastName" />
<input id="name" v-model="fullName" readonly />
推荐阅读
- r - 如何用插入符号绘制预测机器学习?
- python-3.x - 在 Tkinter Python 中的条目小部件内设置默认插入符号位置
- qnamaker - QnA maker 从多个 kb 中获得答案
- ionic2 - 在 ionic 3 中使用后台地理位置无法将位置数据更新到服务器中
- vue.js - 如何在 gridsome 中添加和使用 vue-confetti
- java - 强制 kafka 消费者轮询具有最高延迟的分区
- reactjs - useForm 在既不是 React 函数组件的函数中被调用...错误
- sql - SQL Server:防止重复值的存储过程
- c# - 使用 ScrollViewer 实现响应式播放器
- javascript - JavaScript:如何检查数组中5个项目中的4个是否相同