2017-01-16 71 views
0

我遇到問題。驗證錯誤表格請求v模型Laravel vue.js

我在窗體上使用了表單請求,但也使用了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型= 「名」 的{{老( '名')}}變量的作品。

這是我在瀏覽器中從Vue得到的錯誤。

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

直列值屬性將使用V-模型時被忽略。相反,在組件的數據選項中聲明初始值。

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> 

回答

0

你應該與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: {}, 
    }; 
}, 
+0

:價值未能編譯模板。有任何想法嗎? –

+0

@EdvardÅkerberg我沒有看到任何錯誤[此處](http://jsfiddle.net/j1ecyryf/) – Saurabh

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:使用V-綁定https://jsfiddle.net/0uvqmodc/

+0

另外還有一些東西(因爲OP對vue來說似乎是新的):'v-model'將用戶輸入與'name'綁定在一起'data',所以它需要服從腳本中的初始值,並且不能同時服從模板中的'value'(這也是*初始值*),因此是錯誤。爲了解決這個問題,第一個想法是在js中設置'old()',並帶有一些全局變量。這個答案巧妙地允許我們從模板中的服務器傳遞數據,並使用修改腳本'data'的指令來避免多初始值問題。 –