1 回答

TA貢獻(xiàn)1789條經(jīng)驗(yàn) 獲得超8個(gè)贊
您需要使用 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>
更新
即使進(jìn)行了 v-bind 更正,我認(rèn)為您的代碼也無法正常工作,因?yàn)榻M件無法獲取腳本標(biāo)記內(nèi)的值。您可以做的是以更像 Vue 的方式包裝當(dāng)前內(nèi)容,并通過組件而不是從 blade 文件傳遞 props。在輸入上使用 v-model 不需要函數(shù)來更新值,它會(huì)自動(dòng)從 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 />
添加回答
舉報(bào)