Laravel 5：如何在编辑 vue js 中获取 keyup 的值

Posted 2023-02-22

【中文标题】Laravel 5：如何在编辑 vue js 中获取 keyup 的值

【英文标题】：Laravel 5 : How to get the value on keyup in edit vue js

【发布时间】：2020-02-17 04:45:08

【问题描述】：

在我们的应用程序中，我们在代码中进行了验证。在编辑部分，我如何检查代码是否已经存在？当我尝试这个时

编辑 vue

<label>Code</label>
<input type="text" class="form-control" name="edit_code" @keyup="checkCOACode"  v-model="coa_code" v-bind:value="chart_of_account_edit.code">

我遇到了这个错误

在同一元素上与 v-model 冲突，因为后者已经在内部扩展为值绑定

编辑 VUE

 props: 
            chart_of_account_edit: '',
        ,
checkCOACode(e) 
                e.preventDefault();
                var code = this.coa_code;
                const coa = this.$refs.coaCode
                const coaCode = coa.dataset.table
                alert(coaCode);
                return false;
                axios.post("/checkIfCodeExists", code:code,table:table)
                    .then((response)  =>  
                        var code_checker = '';
                        if (response.data == 0) 
                            $('.edit-chart-of-account-finish').removeAttr('disabled','disabled');
                            // code_checker    =   'wala pang ganitong code';
                        else
                            $('.edit-chart-of-account-finish').attr('disabled','disabled');
                            code_checker    =   'Code is already exist';
                        
                        this.coa_checker_result = code_checker;
                    );
            ,

问题：如何在编辑部分的代码中获取输入值？

【问题讨论】：

不要同时使用v-model和:value

所以。我怎样才能获得价值？因为当用户单击编辑按钮时，我使用 v-bind=value 来获取我的默认值。

如果要设置初始值，则将其设置为this.coa_code

对不起，我不明白，我应该在哪里做？ chart_of_account_edit 是我单击编辑按钮时的值（我把它放在我的道具中）。我更新了我的帖子。

【参考方案1】：

试试这个。

<input type="text" class="form-control" name="edit_code" @input="checkCOACode"  v-model="coa_code" v-bind:value="chart_of_account_edit.code">

编辑

<label>Code</label>
<input type="text" class="form-control" name="edit_code" @keyup="checkCOACode"  v-model="coa_code" v-model:value="chart_of_account_edit.code">

【讨论】：

我可能会错过您所做的更改，但这与 OP 已有的有何不同？

@Phil 看起来像 @keyup 变成了 @input

@lagbox 欢呼。如果作者能指出这一点，将会有所帮助。我怀疑它会改变错误信息

我认为@keyup 方法负责单键启动。例如：@keyup.enter = "checkCOACode" 。 keyup 事件 linsener 将触发。

【参考方案2】：

根据您收到的错误，您不能在同一元素中包含 v-model 和 v-bind:value。试试：

<label>Code</label>
<input type="text" class="form-control" name="edit_code" @keyup="checkCOACode"  v-model="coa_code">

【讨论】：

点击编辑按钮后我的默认值会怎样？

它会改变，这就是 v-model 所做的。但是如果你真的想存储初始值，你可以向组件添加另一个数据，比如initial_coa_code，然后在create()/mounted() 上做this.initial_coa_code = this.coa_code。

我说的对吗？在我的组件中，我添加了这个 initial_coa_code: ' '，在我安装的 this.initial_coa_code = this.coa_code