Question

2个星期前我发现我无法解决这个问题，然后去谷歌找一个解决方案，这个解决方案真的不给我一个，也许错误的谷歌搜索不确定。让我谈谈这一点。

我得到了这段html和vue，当按下按钮时，它会动态地增加一个手机字段。事情是当Laravel验证失败时我不知道如何将旧（）数据转换为Vue，所以我可以将其推送到phone_number_field数组。

<a v-on:click="addPhoneNumberField">
    <span class="panel-title glyphicon glyphicon-plus" aria-hidden="true"></span>
</a>
<a v-on:click="deletePhoneNumberField" v-if="phone_number_field.length > 0">
    <span class="panel-title glyphicon glyphicon-remove" aria-hidden="true"></span>
</a>

<div class="phone row" v-for="(field, index) in phone_number_field">
    <input id="phone_number_number" type="text" class="form-control" :name="'customer[phone_numbers][' + index + '][number]'" placeholder="Number" required>
    <input id="phone_number_description" type="text" class="form-control" :name="'customer[phone_numbers][' + index + '][description]'" placeholder="Description">  
</div>

Vue部分

var bindUser = new Vue({
    el: '#bindUser',

    data: {
        phone_number_field: [],
    },

    methods: {
        addPhoneNumberField() {
            this.phone_number_field.push({
                number: '',
                description: ''
            })
        },

        deletePhoneNumberField(index) {
            this.phone_number_field.splice(index, 1)
        },
    },
});

Answer 1

旧值在old('customer.phone_numbers')内，所以只需将其编码传递给vue启动。

你的刀片模板（在js之前的某个地方）：

<script>
   var phoneValues = {!! json_encode(old('customer.phone_numbers', [])) !!};
</script>

您的js文件：

data: {
    phone_number_field: phoneValues,
},

其中[]是默认值。但我认为将所有启动代码放在一个地方（刀片模板）会更好。

Answer 2

这是一个想法.. 你为什么不沿着这些方向做点什么：

let phone_number_field = [];
<?php if (!empty($_POST['phone_number_field']: ?>
    phone_number_field = []; //Loop foreach or whatever you need to build it
<?php endif; ?>

然后在VUE中，您可以使用预先制作的或者您预先创建的空phone_number_field将其初始化

将laravel旧表单数据传递给Vue.js实例

2 个答案: