每次我添加一個元素時，它都會自動替換所有其他元素，但只有當我插入整個物件時才會發生這種情況，如果我插入一個經典元素，一個整數，一個字串可以正常作業。
<body>
<div id="app">
<button @click="post()">POST</button>
<h1>{{ar.name}} {{ar.surname}} {{ar.gender}}</h1>
<br />
<hr />
<div v-for="(value, index) in array">
<text>{{index}} {{value}} </text>
</div>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
let app = Vue.createApp({
data: function () {
return {
ar: {
name: "",
surname: "",
gender: "",
},
array: [],
};
},
methods: {
async post() {
await axios
.get("https://randomuser.me/api/")
.then((r) => {
arr = r.data.results;
arr.forEach((element) => {
this.ar.name = element.name.first;
this.ar.surname = element.name.last;
this.ar.gender = element.gender;
this.array.push(this.ar);
});
})
.catch((err) => {
console.log("Error " err);
});
},
},
});
app.mount("#app");
</script>
</body>
</html>
第一個元素插入
第二個元素插入
uj5u.com熱心網友回復：
您有一個指標參考問題。您實際上將相同的物件指標多次添加到陣列中，即相同的物件參考：
問題說明
const obj = { name: 'ref1' };
const array = [];
array.push(obj);
array.push(obj);
array.push(obj);
// array === [{ name: 'ref1' }, { name: 'ref1' }, { name: 'ref1' }]
// which is actually [$objRef1, $objRef1, $objRef1] where $objRef1 is a pointer to the object address.
// when you updates the object,
obj.name = 'Hello'
// you still have array = [$objRef1, $objRef1, $objRef1] where $objRef1 all referes to this object: { name: 'Hello' }
// array === [{ name: 'Hello' }, { name: 'Hello' }, { name: 'Hello' }]
解決方案：
您必須在每次迭代時創建一個新物件，因此它們都是具有不同地址（指標）的不同物件。
await axios
.get("https://randomuser.me/api/")
.then((r) => {
const arr = r.data.results;
arr.forEach((element) => {
const item = {
name: element.name.first,
surname: element.name.last,
gender: element.gender,
};
this.ar = item // refers to the new created item
this.array.push(item);
});
}).catch((err) => {
console.log("Error " err);
});
uj5u.com熱心網友回復：
您可以在迭代內的物件中分配回應并將其傳遞給this.ar. 試試這種方式：
const URL = "https://randomuser.me/api/";
new Vue({
el: '#app',
data() {
return {
ar: {
name: "",
surname: "",
gender: "",
},
userArray: [],
}
},
methods: {
post() {
axios.get(URL).then((r) => {
arr = r.data.results;
arr.forEach((element) => {
let obj = {};
obj.name = element.name.first;
obj.surname = element.name.last;
obj.gender = element.gender;
this.ar = obj;
this.userArray.push(obj);
});
})
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.js"></script>
<div id="app">
<button @click="post()">POST</button>
<h1>{{ar.name}} {{ar.surname}} {{ar.gender}}</h1>
<br />
<hr />
<div v-for="(value, index) in userArray" :key="index">
<span> {{index}} {{value}} </span>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/479683.html