当我把数据从父组件传递到子组件时,我想知道为什么它不是空的?我想执行Slug操作,但我无法以任何方式解决它。
比如说;
我想捕获子组件中来自axios数据的数据,并为它们采取必要的操作,但据说这个.initialslug值在子组件中是空的,也就是说,在开始时。
ParentComponent.Vue
<template>
<div class="mx-auto flex flex-col">
<div>
<span>title:</span>
<input type="text" v-model="title">
</div>
<div>
<span>Slug:</span>
<Child-component :title="title" :initial-slug="slug"/>
</div>
</div>
</template>
<script>
import ChildComponent from "./ChildComponent.vue";
export default {
name: "Parent",
data() {
return {
title: '',
slug: ''
}
},
components: {ChildComponent},
async created() {
await axios.get(`/categories/4/detail`)
.then((response) => {
this.title = response.data.title
this.slug = response.data.slug
})
}
}
</script>
ChildComponent.Vue
<template>
<input type="text" v-model="slug" @input="wasEdited=true">
</template>
<script>
import Slug from "slug";
Slug.defaults.modes['pretty'] = {};
export default {
name: "Child",
props: {
title: {
type: String,
required: true
},
initialSlug: {
type: String,
required: true
}
},
data() {
return {
slug: this.initialSlug,
wasEdited: false,
}
},
methods: {},
mounted() {
this.slug = this.initialSlug
},
created() {
this.slug = this.initialSlug
},
}
</script>
我希望我发送的数据被写入段塞值。
2条答案
按热度按时间g6baxovj1#
在
ParentComponent
中,您将:initial-slug
属性传递给ChildComponent
。在ParentComponent
中,使用camelCase(slug),但在ChildComponent
prop定义中,使用kebab-case(initialSlug)。这可能是初始段塞未正确通过的原因。以下是ParentComponent.Vue中更正后的html代码:
<Child-component :title="title" :initialSlug="slug"/>
通过此校正,初始段塞应该正确地从ParentComponent传递到ChildComponent。
nxowjjhe2#
你要做的实际上是一个简单的过程,你应该用
watch
来watch
它。我们把初始的Slug变成一个函数,传入的数据被分配给所需的slug值。