如何在blade.php中使用vue获取字段的旧值

Posted 2023-02-22

【中文标题】如何在blade.php中使用vue获取字段的旧值

【英文标题】：How to get old value of a field using vue inside blade.php

【发布时间】：2019-09-01 14:11:59

【问题描述】：

我有一个在 Laravel 刀片文件中使用 vue 的注册表单。我正在对用户的无效输入使用验证器，并且我想获取该字段的旧值，但现在我无法使其工作，因为某些字段正在使用 vue。这是我的代码：

regist.blade.php

<div class="regist_input">
      <input type="email" name="email" v-model="email" v-bind:placeholder="placeholder_email" v-bind:class=" error: emailError ">
      <p class="error_text" v-bind:class=" active: emailError2 ">Invalid email.</p>
      @if($errors->has('email'))
          <p class="alert-error">
           $errors->first('email') 
          </p>
      @endif
</div>
<dd>
    <div class="regist_input">
        <input class="input_company" type="text" name="company" value=" old('company') " placeholder="company"> //this one works
    </div>
</dd>

控制器

if($validator->fails()) 
    return redirect()->back()->withInput()->withErrors($validator->errors());

如果在字段之外，我可以显示它的旧值，这意味着我的验证 php 函数正在工作。

我尝试使用v-bind:value=" old('email') " 或:value=" old('email') " 但不起作用。对于这个，如何在具有vue组件的输入字段中显示旧值？

【参考方案1】：

v-bind:value=" old('email') " 或 :value=" old('email') 不起作用，因为您正在使用 v-model="email"

当你使用 v-model 时，这意味着 Vue 组件的“data”属性中应该有一个“email”属性，并且任何设置给该“email”属性的值都将作为值显示输入字段。

See this Pen 我创建来说明这两种情况。

因此，如果要使用 v-bind:value，则需要删除 v-model。现在我正在写这篇文章，我认为您不需要 v-bind:value 并且可以简单地使用 value（就像您对公司输入所做的那样。

【讨论】：

是的，我明白这一点，但问题是当我单击提交按钮并且验证器失败时，旧值消失了。我怎样才能保留它？请查看我的控制器更新。

【参考方案2】：

您可以使用 data attributes 将刀片 email 数据传递给 vue。

首先应该给一个带有 data 属性的 html 元素添加一个 id。然后使用刀片解析你的数据并将数据属性设置为email数据。

<div id="email-data" data-email=" old('email') "></div>

准确无误（OP）

<input type="email"  value=" old('email') " name="email" v-model="email" id="email-data" data-email=" old('email') " v-bind:placeholder="placeholder_email"
    v-bind:class=" error: emailError ">

然后在vue的created/mounted hook中提取数据并设置为email状态。

created() 
    const el = document.getElementById('email-data')
    const email = el.dataset.email
    this.email = email

【讨论】：

我是否应该在我的代码<input type="email" name="email" v-model="email" v-bind:placeholder="placeholder_email" v-bind:class=" error: emailError "> 的这部分更改某些内容？