Passing Laravel old Data to Vue

[Cruorzy]

I feel like this is a really basic thing but yet I have to ask with limited knowledge on Javascript/Vue

 

I have a form where you can add dynamic fields with Vue.js and it submits just fine, makes a nice array validations goes great and all.

But now when something goes wrong, and not specially in that field there is a bit of an issue in my mind with putting the "old" data back by the old() function.

 

Let me first start with showing you what I got.

 

create.blade.php

<div class="col-md-6">
	<div class="section">
		<label for="age">Password</label>

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

		<div class="password row" v-for="(field, index) in password_fields">
			<input type="text" class="form-control" :name="'task[passwords][' + index + '][password]'" v-bind:value='field.password'>
			<input type="text" class="form-control" :name="'task[passwords][' + index + '][description]'" v-bind:value='field.description'>
			<input type="text" class="form-control" :name="'task[passwords][' + index + '][login]'" v-bind:value='field.login'>
		</div>
	</div>

</div>

 

App.js

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

	data: {
		password_fields: [],
	},

	methods: {

		addPasswordField() {
			this.password_fields.push({
				password: '',
				description: '',
              	login: ''
			})
		},

		deletePasswordField(index) {
			this.password_fields.splice(index,1)
		},
      
	},

});

Now for every add it just adds empty fields.

 

Now my goal is when there is old data to pass it to vue, so I can make a method what fills the "password_fields" array with the old data.

 

Perhaps you guys can help me find a clean way.

[Cruorzy]

It should be real easy, but note that i'm using 2 Vue instances on the same page.