用戶.vue
<template>
<div>
<form>
<label>Val:</label><br />
<input type="text" id="val" name="val" v-model="item.val" /><br />
<label>kk:</label><br />
<input type="text" id="kk" name="kk" v-model="item.kk" /><br /><br />
<input type="submit" value="Submit" @click="updatedata" />
</form>
</div>
</template>
<script>
export default {
name: "User",
data: function () {
return {
val: "",
kk: "",
};
},
methods: {
updatedata() {
val: this.item.val,
kk: this.item.kk,
},
},
};
</script>你好世界.vue
<template>
<div>
<b>Vuejs dynamic routing</b>
<div v-for="item in items" :key="item.id">
<b>{{ item.id }}.</b>
<router-link :to="{ name: 'UserWithID', params: { id: item.id } }">
{{ item.kk }}
</router-link>
</div>
<br /><br /><br />
{{ $route.params.id }}
</div>
</template>
<script>
import User from "./User.vue";
export default {
name: "HelloWorld",
components: {},
data() {
return {
items: [
{ id: 1, val: "1", kk: "mm" },
{ id: 2, val: "22", kk: "aa" },
{ id: 3, val: "55", kk: "dd" },
{ id: 4, val: "77", kk: "gg" },
],
};
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>我正在嘗試更新 vuejs 中的資料，我已經給出了路由并能夠使其動態化。但是當嘗試更新資料時。如何參考組件并更新資料。我在點擊那個按鈕的地方進行了點擊事件。我應該能夠更新資料。
代碼鏈接：- https://codesandbox.io/s/agitated-forest-wl76w?file=/src/components/User.vue
參考代碼：- https://codepen.io/Godex/pen/yPYeJe
uj5u.com熱心網友回復：
你的每個組件都是一個單獨的 Vue 實體。這意味著你不能訪問相同的items使用物件this.items中User或HelloWorld組件。
您需要做的是“提升狀態”，以便兩個組件都可以訪問同一個items物件。您可以使用共同的父組件和道具或使用像 vuex 這樣的商店來做到這一點。道具檔案：https://vuejs.org/v2/guide/components-props.html
為vuex檔案：https://vuex.vuejs.org/
我已經使用道具修改了你的代碼和盒子：https ://codesandbox.io/s/priceless-gauss-62tqm
簡而言之：
- 顯示
items從父組件（或 vuex）傳遞過來的值 ( ) 并將其用作“真實來源”。 - 發出/調度一個事件（例如
update）將新資料傳遞給組件。 - 更新父組件/存盤中的資料。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/388470.html
標籤：javascript Vue.js