我想将我在 vue 中创建的文本合并为 1 个文本
前任：
文本字段 1 = 科德
文本字段 2 = Daerah
文本字段 3 = 诺莫科德
那么我有 1 个文本字段NomorUnik，这是这个文本字段的值是 Kode、Daerah、NomorKode 的组合。每次我输入或更新文本字段时，NomorUnik 也会实时自动编辑。怎么做？
法典：
<v-col cols="12">
<v-text-field label="Kode*" v-model="form.Kode" required></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field label="Daerah*" v-model="form.Daerah" required>
</v-text-field>
</v-col>
<v-col cols="12">
<v-text-field label="NomorKode*" v-model="form.NomorKode" required>
</v-text-field>
</v-col>
<v-col cols="12">
<v-text-field label="KodeUnik*" v-model="form.KodeUnik" required>
</v-text-field>
</v-col>
这是一段将数据发送到 API 的代码
updateData() {
this.listperkiraan.append('jenisperkiraan', this.form.JenisPerkiraan);
this.listperkiraan.append('kodeunik', this.form.KodeUnik);
this.listperkiraan.append('kode', this.form.Kode);
this.listperkiraan.append('daerah', this.form.Daerah);
this.listperkiraan.append('nomorkode', this.form.NomorKode);
var uri = this.$apiUrl + 'listperkiraan/' + this.KodeUnik;
.................
..........
editHandler(item) {
this.typeInput = 'edit';
this.statusUpdate = false;
this.dialog = true;
this.form.Kode = item.Kode;
this.form.Daerah = item.Daerah;
this.form.NomorKode = item.NomorKode;
this.form.KodeUnik = item.KodeUnik;
this.updatedId = item.KodeUnik
},
试试这个：
new Vue({
el:"#app",
data: {
form: {
Kode:'',
Daerah:'',
NomorKode:'',
KodeUnik:''
}
},
methods: {
updateText(){
this.form.KodeUnik = this.form.Kode + ' ' + this.form.Daerah + ' ' + this.form.NomorKode;
}
}
});<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="form.Kode" @keyup="updateText" />
<input type="text" v-model="form.Daerah" @keyup="updateText"/>
<input type="text" v-model="form.NomorKode" @keyup="updateText"/>
<br><br>
KodeUnik: <input type="text" v-model="form.KodeUnik" />
</div>
</body>
</html>解决此问题的最简单方法是在 vue 中使用计算属性。
步骤 1：添加计算属性。
computed: {
NomorUnik() {
return `${this.form.Kode} ${this.form.Daerah} ${this.form.NomorKode}`;
}
}
步骤 2：添加在输入字段中创建的计算
<v-text-field label="KodeUnik*" :value="NomorUnik" required>
文档链接