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

Question

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

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

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

首先应该为具有数据属性的HTML元素添加id。然后使用blade解析数据并将data属性设置为email数据。

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

要完全正确

<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中创建/挂载的钩子中提取数据并设置为email状态。

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

Answer 2

v-bind:value="{{ old('email') }}"或:value="{{ old('email') }}不起作用，因为你使用v-model="email"

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

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

因此，如果要使用v-bind：value，则需要删除v模型。现在我写这篇文章，我认为你不需要v-bind：值，只需简单地使用价值（正如你在公司输入中所做的那样）。