[英]How to pass dynamic data from a blade file as a prop to a vue component?
Inside my blade file -在我的刀片文件中 -
<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>
Inside my vue component -在我的 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 in the browser-浏览器中的 output-
In the blade template: I have a function that listens to the input field on key change (showCurrentvalue).在刀片模板中:我有一个 function 监听键更改的输入字段(showCurrentvalue)。 How can I pass the input value as a prop?
如何将输入值作为道具传递?
In the vue component: The title value is passed (ie A), but forminput value is static. vue组件中:传递了title值(即A),但是forminput值是static。
How do I pass the value typed in the input field dynamically every time it changes?如何在每次更改时动态传递输入字段中键入的值?
You need to use the v-bind: attribute or the short syntax您需要使用 v-bind: 属性或短语法
Normal syntax正常语法
<invoices-component title="a" v-bind:forminput='value'>
</invoices-component>
Short syntax短句法
<invoices-component title="a" :forminput='value'>
</invoices-component>
Or if you are passing values from a Laravel controller或者,如果您从 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>
Even with the v-bind correction I don't think your code will work because the component can't get the value inside the script tag.即使使用 v-bind 更正,我认为您的代码也不会工作,因为组件无法获取脚本标记内的值。 What you can do, is wrapping the current content in a more Vue-way and pass props through components and not from a blade file.
您可以做的是以更 Vue 的方式包装当前内容,并通过组件而不是刀片文件传递道具。 Using v-model on an input you don't need a function to update the value, it gets done from Vue automatically.
在输入上使用 v-model 您不需要 function 来更新值,它会自动从 Vue 完成。
NewComponent.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>
Blade刀
<new-component />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.