为了账号安全,请及时绑定邮箱和手机立即绑定

如何将刀片文件中的动态数据作为道具传递给 vue 组件?

如何将刀片文件中的动态数据作为道具传递给 vue 组件?

侃侃尔雅 2023-01-06 10:39:14

在我的刀片文件中 -


<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>


在浏览器中输出- 

http://img3.sycdn.imooc.com/63b789eb00017e5012550299.jpg

在刀片模板中:我有一个函数可以在键更改时监听输入字段 (showCurrentvalue)。如何将输入值作为道具传递?

在vue组件中:传递的是title值(即A),但是forminput值是静态的。

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

查看完整描述

1 回答

?
拉丁的传说

TA贡献1521条经验 获得超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 />


查看完整回答
反对 回复 2023-01-06
  • 1 回答
  • 0 关注
  • 9 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信