Question

为什么旧值没有传递给vue组件？

此处传递了旧值

<autocomplete-region-component :query="old('regionName')"></autocomplete-region-component>

我来自vue组件的代码

<template>
    <div>
        <input
            type="text"
            autocomplete="off"
            v-model="query"
            v-on:keyup="autoComplete"
            class="form-control js-region-name"
            name="regionName"
            value=""
        >
        <input
            type="hidden"
            class="form-control js-region-id"
            name="regionId"
            value="enteredRegion">
        <div class="panel-footer" v-if="results.length">
            <ul class="list-group select-region">
                <li class="list-group-item list-region" v-for="result in results" v-on:click="selectRegion(result)">
                    {{ result.name }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                results: [],
                query: '',
            }
        },
        methods: {
            autoComplete() {
                this.results = [];
                if(this.query.length > 2){
                    axios.get('/api/regions',{params: {_limit: 2, query: this.query}}).then(response => {
                        this.results = response.data;
                    });
                }
            },
            selectRegion(result) {
                let inputWithRegionName = document.querySelector('.js-region-name');
                let inputWithRegionId = document.querySelector('.js-region-id');
                let listRegions = document.querySelector('.panel-footer');

                inputWithRegionName.value = result.name;
                inputWithRegionId.value = result.id;
                listRegions.hidden = true;
            }
        }
    }
</script>

控制台没有错误

由于我是初学者，确实需要您的帮助，请提供详细答案。谢谢

更新

Answer 1

在创建组件时（如与<autocomplete-region-component>一样，如果要从其父级传递值到它，则必须在组件级别定义prop。因此，请在脚本中添加{ {1}}属性如下：

props

现在，在您的autocomplete-region-component组件中，您可以按预期将查询的值用作props: [ 'query', ],。

在您的组件标签中，您无需使用髭标签来传递值，而只需传递普通的javascript。我还建议此时不要对json进行编码。如果需要，您始终可以在组件内对其进行编码。

this.query

Answer 2

胡子的语法是插值文本，而不是传递道具。

要将属性或属性设置给子组件（包括本地HTML元素），您需要使用height指令（doc）。

height元素可以很好地记住此规则。

168px

然后，您的代码应如下所示：

v-bind

Answer 3

您必须定义一个道具并将数据设置为该道具

当您通过v-bind简写:在组件标签中传递数据时，这些数据被称为props，因此必须将其定义为

Vue不允许在孩子中改变从父级传递来的道具，因此您应该在反应性数据对象中制作该道具的本地副本

props: {
    queryProp: {
        required: false,
        type: String
    }
},
data() {
    return {
        results: [],
        query: this.queryProp
    };
},

假设像这样的Blade视图

<div id="app">
    <form action="/" method="post">
        @csrf
        <input type="text" name="regionName"> <br>
        <button type="submit">Submit</button>
    </form>
    <autocomplete-region-component :query-prop="{{ json_encode(old('regionName')) }}"></autocomplete-region-component>
</div>

<script src="/js/app.js"></script>

还有这样的路线

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

Route::view('/', 'welcome');
Route::post('/', fn (Request $request) => $request->validate(['regionName' => 'integer']));

这是发布无效数据后的结果

为什么旧值不传递给vue组件？

3 个答案: