使用 Vue 在 Laravel 9 中从子组件到父组件获取更新值时出现问题

Question

我正在使用带有 Vue 3 的 Laravel 9 应用程序。我创建了全新安装。我想创建一些我想在父组件中使用的组件。我要创建的第一个组件将传递一个值（邮政编码），该组件将格式化并验证传递的值。父组件应该可以访问更新后的格式化值。

作为第一步，我使用 vuejs.org 中的文档创建了邮政编码组件。

<!-- postalcode.vue -->
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  computed: {
    value: {
      get() {
        return this.modelValue;
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
}
</script>

<template>
  <input v-model="value" />
</template>

接下来，我复制了 Laravel Vue 安装附带的示例组件，以创建数据元素“邮政编码”并用作 ,

的 v 模型

    <div class="card-body">
        <postal-code-input v-model="postalcode" /> {{ postalcode }}
    </div>
</template>

<script>
    export default {
    data(){
        return {
            postalcode:'l3r3g',
        }
    },
}

当我运行我的应用程序时，它会在输入框中显示初始值 (l3r3g)，并在 {{postalcode}} 处显示相同的值。但是，当我更新输入框中的值时，它不会更新父组件中的 {{postalcode}} 。当我在 vue 开发工具中检查组件时，我看到 modelValue 和 computed 'value' 未定义，如图所示

我只是不知道发生了什么。如果能帮助解决此问题，我将不胜感激。

Answer 1

如果您使用 v-model 绑定这样的道具

<postal-code-input v-model="postalcode" />

postal-code 组件应该发出“输入”并有一个值属性。你可以使用不同的道具和事件，但你应该避免 v-model 绑定，而只是做这样的事情

<postal-code-input :modelValue="postalcode" @modelValueUpdate=“handleUpdate” />

Answer 2

我尝试使用 watcher 而不是 computed 属性因为计算的属性会产生缓存，有时它的 set() 方法会在调试时造成复杂性 reactivity.

以下代码片段对我有用：


// PostalCode.vue

<template>
    <div class="input-group  input-group-merge mb-3">
        <input
            v-model="postalCode"
            type="text" class="form-control"
            id="postal_code" name="postal_code"
        />
    </div>
</template>

<script>
export default {
    name: "PostalCode",

    props: {
        modelValue: String,
    },

    data() {
        return {
            postalCode: null
        }
    },

    watch: {
        // watching prop
        modelValue: {
            handler: function (newValue) {
                if (newValue) {
                    this.postalCode = newValue;
                }
            },
            immediate: true,
        },

       // watching data() property
        postalCode: {
            handler: function (newValue, old) {            
                this.$emit('update:modelValue', newValue)
            },
            immediate: true
        }
    }
}
</script>

用法：

<postal-code v-model="user.postal_code"/>

您也可以将您的格式化逻辑放在任何观察器中。

Hint/Suggestion:

根据要求，如果你想对父项更改的道具进行格式化（对于旧的和新的），那么将格式化逻辑放在 modelValue watcher 中。

注：

以下代码片段在 Vue3

上完美运行

使用 Vue 在 Laravel 9 中从子组件到父组件获取更新值时出现问题

Problem getting updated value from child component to the parent component in a Laravel 9 with Vue

laravel

vue-component

用法：

Hint/Suggestion:

注：