验证错误 Form Request v-model Laravel vue.js

Posted 2023-02-22

【中文标题】验证错误 Form Request v-model Laravel vue.js

【英文标题】：Validation error Form Request v-model Laravel vue.js

【发布时间】：2017-05-31 03:37:59

【问题描述】：

我有问题。

我在表单上使用了表单请求，但也使用了 Vue。我的问题是 old('') 变量不能与 Vue v-model 一起使用。

这是输入字段的示例。

<div class="form-group">
    <label for="name"> trans('messages.name') </label>
    <input type="text" name="name" v-model="name" id="name" value=" old('name') " class="form-control">
    @if($errors->has('name'))
      <span class="help">
        trans('Validations.name')
      </span>
    @endif
</div>

如果我删除 v-model="name" old('name') 变量有效。

这是我在浏览器中从 Vue 得到的错误。

<input v-model="name" value="asdasdasd">:

使用 v-model 时，内联值属性将被忽略。改为在组件的数据选项中声明初始值。

vue 文件

<script>
  import RangeSlider from './RangeSlider.vue';

  export default 
    components: 
      RangeSlider,
    ,

    props: ['fields'],

    data() 
      return 
        name: '',
        email: '',
        phone: '',
        loading: false,
        errors: ,
      ;
    ,

    methods: 
      onSubmit() 
        this.loading = true;
      
    
  ;
</script>

【参考方案1】：

Vue 不允许您从html 初始化模型数据，因为Vue 期望您从API 检索数据并从Vue instance 设置它，这在使用时可能会很痛苦它与blade 结合使用。解决这个问题的最简单方法是创建一个指令来自己创建init：

Vue.directive('init', 
  bind: function(el, binding, vnode) 
    vnode.context[binding.arg] = binding.value;
  
)

然后用作：

<input type="text" name="name" v-model="name" id="name" v-init:name="'old('name')'" class="form-control">

这是 JSFiddle：https://jsfiddle.net/0uvqmodc/

【讨论】：

另外的东西（因为OP对vue来说似乎是新的）：v-model将用户输入与data中的name绑定，所以它需要服从脚本中的初始值，并且可以't 同时遵守模板中的value（这也是一个初始值），因此出现错误。为了解决这个问题，第一个想法是在js中设置old()，并带有一些全局变量。这个答案巧妙地允许我们在模板中传递来自服务器的数据，并使用修改脚本data 的指令来避免多初值问题。

【参考方案2】：

您应该在v-bind 的帮助下尝试此操作，它会动态绑定一个或多个属性。

<input type="text" name="name" v-model="name" id="name" v-bind:value="old('name')" class="form-control">

但是，如果您想为输入字段设置一个初始值，您可以将数据变量name 设置为您要设置的值（old('name')）。

HTML

<input type="text" name="name" v-model="name" id="name" class="form-control">

JS

data() 
  return 
    name: 'oldValue',
    email: '',
    phone: '',
    loading: false,
    errors: ,
  ;
,

【讨论】：

使用 v-bind:value 编译模板失败。有什么想法吗？

@EdvardÅkerberg 我没有看到任何错误here