Question

说明

我有一个输入字段，它将通过反跳功能发送Axios请求。输入字段中已存在的值由Laravel生成。当用户更新字段中的值时，我需要此值然后通过Axios请求发送。

我不确定这是否是实际的Prop值，是否需要查看更改，还是需要将更新后的值存储在Vue的data()部分中。

edit-personal-details.blade.php （包含在其他视图中）

<edit-personal-details name="{{ $cv->display_name }}" location="{{ $cv->location }}" phone="{{ $cv->contact_number }}" email="{{ $cv->email_address }}"></edit-personal-details>

EditPersonalDetails.vue （组件）

<template>
    <div class="grid grid-columns-2 grid-gap-8">
        <div>
            <label>
                <span class="block font-bold mb-2 text-grey-500 text-sm">Display Name <i class="fad fa-question-circle leading-none text-blue-400" data-tippy-content="The name that will appear on your CV"></i></span>
                <input type="text" :value="name" @input="updateDisplayName" class="bg-grey-200 border-2 border-grey-200 hover:border-grey-300 focus:border-blue-300 outline-none p-3 rounded text-grey-700 text-lg transition w-full font-semibold">
            </label>
        </div>
    </div>
</template>
<script>
import _ from 'lodash'
import Swal from 'sweetalert2'
const Toast = Swal.mixin({
  toast: true,
  position: 'top-end',
  showConfirmButton: false,
  timer: 3000
})

export default {
    props: ['name'],
    methods: {
        updateDisplayName: _.debounce(() => {
            axios.post('url', {
                display_name: this.name
            })
            .then(response => {
                // Show success
            })
            .catch(response => {
                Swal.fire({
                    type: 'error',
                    title: 'Error'
                });
            })

        }, 1500),
    }
}
</script>

我如何准确地检测到Prop的值已更改，然后将其推送到Axios请求中？

我需要能够填充数据，同时还要使该数据可编辑，并且一旦Vue检测到更改，就对其进行更新。

编辑：我试图使用观察者进行计算，但是无法在Axios请求中获取它。

预先感谢您的帮助。

Answer 1

问题在于您正在使用:value来设置值，而不是从updateDisplayName函数中获取它。您应该传递event.target.value而不是“ static” 值。但是解决此问题的更好方法是将数据属性与v-model

一起使用

另一个问题（我知道）是您正在对组件内部的prop进行突变。运行时Vue可以使您做到这一点，但是如果您可能得到警告：“避免直接改变道具”

该道具从组件的角度看应该是不变的，这意味着该组件不应尝试对其进行更改。假设您使用PHP生成这些值的渲染时间，那么这些值将不会更改。如果您希望组件可以更改传递的prop，则应将值复制到组件的实例中。

export default {
    props: ['name'],
    data: function () {
      return {
        name_val: this.name
      }
    },
    methods: {
        updateDisplayName: _.debounce(function(){
            axios.post('url', {
                display_name: this.name_val
            })
            .then(response => {
                // Show success
            })
            .catch(response => {
                Swal.fire({
                    type: 'error',
                    title: 'Error'
                });
            })

        }, 1500),
    }
}

<input type="text" @input="updateDisplayName" v-model="name_val">

TL; DR;

您可以解决此问题，而无需执行以下操作即可将初始值复制到数据中：

<input type="text" @input="updateDisplayName" v-model="name">

但这不是一个好主意（请参阅上述警告）或链接：https://vuejs.org/v2/guide/migration.html#Prop-Mutation-deprecated

更新

此外，正如@skirtle所指出的，在反跳功能中应使用function而不是数组函数。好像lodash正在使用function.apply来绑定上下文（https://github.com/lodash/lodash/blob/4.17.15/lodash.js#L10333）

道具价值未更新为通过Axios发送

1 个答案:

TL; DR;

更新