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 =＆＃34; name＆＃34; {{old（＆＃39; name＆＃39;）}}变量有效。

这是我在浏览器中从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>

Answer 1

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

init

然后用作：

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

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

验证错误表单请求v-model Laravel vue.js

2 个答案: