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

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

首先应在具有data属性的HTML元素上添加一个id。然后使用Blade解析数据并将data属性设置为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中已创建/已安装的钩子中提取数据并设置为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组件的“数据”属性中应该有一个“电子邮件”属性，并且设置为该“电子邮件”属性的任何值都将显示为该值输入字段。

See this Pen我是为了说明这两种情况而创建的。

因此，如果要使用v-bind：value，则需要删除v-model。现在，我正在写这篇文章，我认为您不需要v-bind：value，而只需使用值即可（就像您在处理公司输入内容时一样。

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

2 个答案: