如何將刀片文件中的動態數據作為道具傳遞給 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>

瀏覽器中的 output-

在刀片模板中：我有一個 function 監聽鍵更改的輸入字段（showCurrentvalue）。 如何將輸入值作為道具傳遞？

vue組件中：傳遞了title值（即A），但是forminput值是static。

如何在每次更改時動態傳遞輸入字段中鍵入的值？

Answer 1

您需要使用 v-bind: 屬性或短語法

正常語法

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

短句法

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

或者，如果您從 Laravel controller 傳遞值

# 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 的方式包裝當前內容，並通過組件而不是刀片文件傳遞道具。 在輸入上使用 v-model 您不需要 function 來更新值，它會自動從 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 />