如何将动态数据从刀片文件作为道具传递到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组件中：传递了标题值（即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校正，我也不认为您的代码会工作，因为该组件无法在script标签内获取值。 您可以做的是将当前内容包装在更Vue的方式中，并通过组件而不是从刀片文件传递道具。在输入上使用v-model不需要更新值的功能，它会自动从Vue完成。

NewComponent.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 />