<div v-for="item in items" :key="item.id">
<b>{{ item.id }}.</b>
<router-link :to="{ name: 'UserWithID', params: { id: item.id } }">
{{ item.val }} --- {{ item.kk }}
</router-link>
</div> <div>
<form @submit.prevent="updateData">
<label>Val:</label><br />
<input
type="text"
id="val"
name="val"
@input="val = $event.target.value"
:value="currentItem.val"
/><br />
<label>kk:</label><br />
<input
type="text"
id="kk"
name="kk"
@input="kk = $event.target.kk"
:value="currentItem.kk"
/><br /><br />
<input type="submit" value="Submit" />
</form>
</div>
export default {
name: "User",
data: function () {
return {
val: "",
kk: "",
};
},
props: {
items: {
required: true,
default: () => {},
},
},
computed: {
currentItem() {
return this.items[this.$route.params.id];
},
},
methods: {
updateData() {
const updatedItems = [...this.items];
updatedItems[this.$route.params.id] = {
...this.currentItem,
kk: this.kk || this.currentItem.kk,
val: this.val || this.currentItem.val,
};
this.$emit("update", updatedItems);
this.$router.push("/");
},
},我能夠動態更新資料，但小問題是，當嘗試更新資料時。當我輸入詳細資訊并單擊提交按鈕時，我有兩個名為val、kk 的欄位。然后只有一個欄位正在更新。兩個領域？
我認為 updateData 方法有問題
代碼鏈接：- https://codesandbox.io/s/damp-wildflower-sie0h?file=/src/components/HelloWorld.vue
uj5u.com熱心網友回復：
看看你的代碼$event.target.kk，kk 是什么？更新：$event.target.value 可以，在線：https ://codesandbox.io/embed/exciting-shape-duods?fontsize =14& hidenavigation =1& theme=dark
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/388465.html
標籤：javascript Vue.js
上一篇：如何在VueJS中使用外部陣列