如何将动态数据从刀片文件作为prop传递到vue组件? [英] How to pass dynamic data from a blade file as a prop to a vue component?

问题描述

在我的刀片文件中-

<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组件内部-

Inside my vue component -

<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组件中:传递了标题值(即A)，但forminput值是静态的.

每次更改时如何动态传递在输入字段中键入的值?

In the blade template: I have a function that listens to the input field on key change (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.

How do I pass the value typed in the input field dynamically every time it changes?

推荐答案

您需要使用v-bind:属性或简短语法

You need to use the v-bind: attribute or the short syntax

常规语法

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

短语法

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

或者如果您要从Laravel控制器传递值

Or if you are passing values from a 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校正，我也不认为您的代码会工作，因为该组件无法在script标签内获取值.您可以做的是将当前内容包装在更Vue的方式中，并通过组件而不是从刀片文件传递道具.在输入上使用v-model不需要更新值的功能，它会自动从Vue完成.

Update

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. 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. Using v-model on an input you don't need a function to update the value, it gets done from Vue automatically.

NewComponent.vue

NewComponent.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 />

这篇关于如何将动态数据从刀片文件作为prop传递到vue组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！