如何将刀片文件中的动态数据作为道具传递给 vue 组件？

Question

在我的刀片文件中 -<b-input-group class="mt-3 mb-3" size="sm">    <b-form-input id="filterinput" placeholder="Filter" type="text" onInput="showCurrentValue(event)"></b-form-input></b-input-group><invoices-component title="a" forminput='value'></invoices-component><script>    var value ='';    function showCurrentValue(event)    {         value = event.target.value;              console.log(value)    };          </script>在我的 vue 组件中 -<template>  <div class="my-5">    <h2>Invoice inner</h2>    <h2>{{title}}</h2>    <h2>{{forminput}}</h2>     </div></template><script>export default {  props: ["title", "forminput"],};</script>在浏览器中输出- 在刀片模板中：我有一个函数可以在键更改时监听输入字段 (showCurrentvalue)。如何将输入值作为道具传递？在vue组件中：传递的是title值（即A），但是forminput值是静态的。每次更改时如何动态传递输入字段中键入的值？

Answer 1

您需要使用 v-bind: 属性或短语法

正常语法

<invoices-component title="a" v-bind:forminput='value'>

</invoices-component>

短语法

<invoices-component title="a" :forminput='value'>

</invoices-component>

或者，如果您从 Laravel 控制器传递值

# laravel controller

public function formView(param)

{

    $data = ["key" => "value", "key" => "value"];

    return view("my.view", $data);

}

<!-- blade file -->

<invoices-component title="a" :forminput='{{$data}}'>

</invoices-component>

更新

即使进行了 v-bind 更正，我认为您的代码也无法正常工作，因为组件无法获取脚本标记内的值。您可以做的是以更像 Vue 的方式包装当前内容，并通过组件而不是从 blade 文件传递 props。在输入上使用 v-model 不需要函数来更新值，它会自动从 Vue 完成。

新建组件.vue

<template>

    <b-input-group class="mt-3 mb-3" size="sm">

        <b-form-input id="filterinput" placeholder="Filter" type="text" 

    v-model="formInput"></b-form-input>

    </b-input-group>

    <invoices-component title="a" :forminput='formInput'>

    </invoices-component>

</template>

<script>

import InvoicesComponent from '......'

export default {

    components: {InvoicesComponent}

    data() {

        return {

            formInput: ''

        }

    }

}

</script>

刀

<new-component />