驗證錯誤 Form Request v-model Laravel vue.js

Question

我有個問題。

我在表單上使用了表單請求，但也使用了 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 時將忽略內聯值屬性。 改為在組件的數據選項中聲明初始值。

文件

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

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

Answer 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: {},
  };
},