vue.js - 观看从父母到孩子的道具变化
问题描述
我试图在以下解决方案中实现观察者: 如何监听“道具”变化
我有一个名为“selectedItem”的属性,我试图将其传递给一个孩子并监视出现的值,以便我可以通过处理程序对其进行一些操作,但由于某种原因没有触发手表.
这是父子代码:
父级(产品组件):
<template>
<div class="container">
<Popup item="selectedItem" />
<b-table striped hover :items="products" :fields="fields">
<template #cell(Edit)="data">
<b-button
v-b-modal="'edit-modal'"
v-on:click="setSelectedItem(data.item)"
variant="warning"
>
Edit
</b-button>
</template>
</b-table>
</div>
</template>
<script>
import Popup from "./Popup";
export default {
name: "Products",
components: { Popup },
data() {
return {
products: [],
countries: [],
fields: [],
selectedItem: null,
};
},
methods: {
getProducts() {
fetch("http://localhost:5000/", {
method: "GET",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
})
.then(async (res) => {
try {
let data = await res.json();
this.products = data.products;
this.countries = data.countries;
this.fields = Object.keys(this.products[0]);
this.fields.push({ key: "Edit", label: "Click & Edit" });
console.log(this.fields);
} catch (error) {
console.log(error);
}
})
.catch((error) => console.log(error));
},
setSelectedItem(item) {
this.selectedItem = item;
},
},
watch: {
selectedItem: {
handler(val) {
console.log(val);
},
deep: true,
},
},
created() {
this.getProducts();
},
};
</script>
孩子(弹出组件)
<template>
<b-modal id="edit-modal">
<!-- <b-button v-on:click="updateItem">update</b-button> -->
</b-modal>
</template>
<script>
export default {
name: "Popup",
props: {
selectedItem: Object,
},
data() {
return {
item: undefined
};
},
watch: {
selectedItem: {
handler(val) {
console.log(val);
},
deep: true,
},
},
};
</script>
我知道我在这里问了一个很多问题,但还没有弄清楚我做错了什么。
解决方案
您的Popup
组件声明它接收带有 name 的 prop selectedItem
。但是您正在使用 Popup <Popup item="selectedItem" />
,这意味着您正在尝试将字符串“selectedItem”传递给名为item
这就是你想要的:
<Popup :selectedItem="selectedItem" />
推荐阅读
- python - 如何从powershell的2行输出中获取字符串
- angular - 使用角度 2 和引导程序获取多级选择值
- git - Git:无法将分支拉回本地(找不到远程参考)
- php - 避免使用相同数据的记录
- laravel - laravel中的CSRF错误
- c# - T 到 ActionResult 的隐式转换
不适用于某些类型 - voltdb - 如何在 VoltDB 中增加查询特定超时
- ruby-on-rails - RSpec:等待替代匹配
- android - 根据某些值平滑更改按钮的可绘制背景颜色
- mysql - 如何在 AWS Aurora (MYSQL) 中查看客户端与读取器和写入器的连接?