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

Question

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

Answer 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（就像您对公司输入所做的那样。

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