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

Question

我有一个在 Laravel Blade 文件中使用 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 组件的输入字段中显示旧值？

Answer 1

您可以使用 data attributes 将 blade email 数据传递给 vue .

首先应该向具有数据属性的 HTML 元素添加一个 id。然后使用 blade 解析你的数据并将数据属性设置为 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
}