検証エラーフォームリクエストvモデル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から取得したエラーです。 Vモデルを使用した場合

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

インライン値属性は無視されます。代わりにコンポーネントのデータオプションで初期値を宣言します。

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> 

Answer 1

あなたは動的に1つ以上の属性を結合する、v-bindの助けを借りて、これを試してみてください。あなたが入力フィールドに初期値を設定したい場合は、設定したい（​​）値として

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

はしかし、あなただけのデータ変数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: {}, 
    }; 
}, 

Answer 2

VueVueはあなたがAPIからデータを取得し、それを設定することを期待ので、あなたが、HTMLからモデルデータを初期化することはできません。 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です：V-バインドを使用してhttps://jsfiddle.net/0uvqmodc/