1 回答

TA貢獻1789條經驗 獲得超8個贊
您需要使用 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 />
添加回答
舉報