我有一个路由组件,当我在路由定义中设置它们时,为什么我的道具没有自动更新?
I have a route component, why are my props not automatically updating when I set them in the route definition?
我的索引簿列出了所有已注册的书籍,当我单击编辑特定书籍时,它确实在路径中获取了特定书籍的 ID,但我的 props 元素没有获取它,这是什么错误!
我该如何解决?
下面是我的索引页上的代码:
<router-link :to="{ name: 'update_book', params: {id: book.id} }">
<font-awesome-icon icon="pen-square" />
</router-link>
在我的更新页面我有:
<script>
props: ['id'],
data() {
return {
books: [],
};
},
methods: {
getBook(id) {
axios.get(`http://localhost:3000/api/v1/books/${id}`) // Gets an specif book
.then((response) => { this.books = response.data; });
},
created() {
this.getBook(this.id);
},
watch: {
$route() {
this.getBook(this.id);
},
路由器不将 id
传递给 props.In 你的情况你可以在 this.$route.params
中找到 id
即使您在路由器本身中使用类似 /book/:id
的东西,id
参数也会存在于 this.$route.params.id
.
中
所以你需要这样的东西:
created() {
this.getBook(this.$router.params.id);
},
顺便说一句,在观察者中也是如此。
我的索引簿列出了所有已注册的书籍,当我单击编辑特定书籍时,它确实在路径中获取了特定书籍的 ID,但我的 props 元素没有获取它,这是什么错误! 我该如何解决?
下面是我的索引页上的代码:
<router-link :to="{ name: 'update_book', params: {id: book.id} }">
<font-awesome-icon icon="pen-square" />
</router-link>
在我的更新页面我有:
<script>
props: ['id'],
data() {
return {
books: [],
};
},
methods: {
getBook(id) {
axios.get(`http://localhost:3000/api/v1/books/${id}`) // Gets an specif book
.then((response) => { this.books = response.data; });
},
created() {
this.getBook(this.id);
},
watch: {
$route() {
this.getBook(this.id);
},
路由器不将 id
传递给 props.In 你的情况你可以在 this.$route.params
id
即使您在路由器本身中使用类似 /book/:id
的东西,id
参数也会存在于 this.$route.params.id
.
所以你需要这样的东西:
created() {
this.getBook(this.$router.params.id);
},
顺便说一句,在观察者中也是如此。