VueJS 3从父到子的axios数据

bxgwgixi  于 2023-10-18  发布在  iOS
关注(0)|答案(2)|浏览(145)

当我把数据从父组件传递到子组件时,我想知道为什么它不是空的?我想执行Slug操作,但我无法以任何方式解决它。
比如说;
我想捕获子组件中来自axios数据的数据,并为它们采取必要的操作,但据说这个.initialslug值在子组件中是空的,也就是说,在开始时。
ParentComponent.Vue

  1. <template>
  2. <div class="mx-auto flex flex-col">
  3. <div>
  4. <span>title:</span>
  5. <input type="text" v-model="title">
  6. </div>
  7. <div>
  8. <span>Slug:</span>
  9. <Child-component :title="title" :initial-slug="slug"/>
  10. </div>
  11. </div>
  12. </template>
  13. <script>
  14. import ChildComponent from "./ChildComponent.vue";
  15. export default {
  16. name: "Parent",
  17. data() {
  18. return {
  19. title: '',
  20. slug: ''
  21. }
  22. },
  23. components: {ChildComponent},
  24. async created() {
  25. await axios.get(`/categories/4/detail`)
  26. .then((response) => {
  27. this.title = response.data.title
  28. this.slug = response.data.slug
  29. })
  30. }
  31. }
  32. </script>

ChildComponent.Vue

  1. <template>
  2. <input type="text" v-model="slug" @input="wasEdited=true">
  3. </template>
  4. <script>
  5. import Slug from "slug";
  6. Slug.defaults.modes['pretty'] = {};
  7. export default {
  8. name: "Child",
  9. props: {
  10. title: {
  11. type: String,
  12. required: true
  13. },
  14. initialSlug: {
  15. type: String,
  16. required: true
  17. }
  18. },
  19. data() {
  20. return {
  21. slug: this.initialSlug,
  22. wasEdited: false,
  23. }
  24. },
  25. methods: {},
  26. mounted() {
  27. this.slug = this.initialSlug
  28. },
  29. created() {
  30. this.slug = this.initialSlug
  31. },
  32. }
  33. </script>

我希望我发送的数据被写入段塞值。

g6baxovj

g6baxovj1#

ParentComponent中,您将:initial-slug属性传递给ChildComponent。在ParentComponent中,使用camelCase(slug),但在ChildComponent prop定义中,使用kebab-case(initialSlug)。这可能是初始段塞未正确通过的原因。
以下是ParentComponent.Vue中更正后的html代码:
<Child-component :title="title" :initialSlug="slug"/>
通过此校正,初始段塞应该正确地从ParentComponent传递到ChildComponent。

nxowjjhe

nxowjjhe2#

你要做的实际上是一个简单的过程,你应该用watchwatch它。我们把初始的Slug变成一个函数,传入的数据被分配给所需的slug值。

  1. initialSlug: function () {
  2. this.slug = this.initialSlug
  3. }
  1. <template>
  2. <input type="text" v-model="slug" @input="wasEdited=true">
  3. </template>
  4. <script>
  5. import Slug from "slug";
  6. Slug.defaults.modes['pretty'] = {};
  7. export default {
  8. name: "Child",
  9. props: {
  10. title: {
  11. type: String,
  12. required: true
  13. },
  14. initialSlug: {
  15. type: String,
  16. required: true
  17. }
  18. },
  19. data() {
  20. return {
  21. slug: '',
  22. wasEdited: false,
  23. }
  24. },
  25. watch: {
  26. initialSlug: function () {
  27. this.slug = this.initialSlug
  28. }
  29. },
  30. }
  31. </script>
展开查看全部

相关问题