如何将刀片文件中的动态数据作为道具传递给 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 controllerpublic function formView(param){&nbsp; &nbsp; $data = ["key" => "value", "key" => "value"];&nbsp; &nbsp; 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>&nbsp; &nbsp; <b-input-group class="mt-3 mb-3" size="sm">&nbsp; &nbsp; &nbsp; &nbsp; <b-form-input id="filterinput" placeholder="Filter" type="text"&nbsp;&nbsp; &nbsp; v-model="formInput"></b-form-input>&nbsp; &nbsp; </b-input-group>&nbsp; &nbsp; <invoices-component title="a" :forminput='formInput'>&nbsp; &nbsp; </invoices-component></template><script>import InvoicesComponent from '......'export default {&nbsp; &nbsp; components: {InvoicesComponent}&nbsp; &nbsp; data() {&nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; formInput: ''&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}</script>刀<new-component />