Изменение внешних массивов и объектов в компонентах

Последнее обновление: 29.09.2017

В отличие от строк, чисел, логических значений true и false массивы и сложные объекты передаются в компоненты по ссылке. То есть получив ссылку, мы манипулировать значением, которое хранится по этой ссылке.

Изменение массивов

Определим следующую веб-станицу:

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
	<h2>Список пользователей</h2>
    <userform :users="users"></userform>
	<div>
		<useritem v-for="(user, index) in users" 
					:user="user" 
					:index="index" 
					:key="index"
					v-on:userdelete="remove">
		</useritem>
	</div>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
Vue.component('userform', {
	props: ["users"],
	data: function () {
		return {
			user: {name:'', age:18}
		}
	},
	template: `<div>
					<input type="text" v-model="user.name" />
					<input type="number" v-model="user.age" />
					<button  v-on:click="userAdd">Add</button>
				</div>`,
	methods: {
		userAdd: function(event){
			this.users.push({name:this.user.name, age: this.user.age});
		}
	}
});
Vue.component('useritem', {
	props: ["user", "index"],
	template: `<div>
					<p>Name: {{user.name}} <br> Age: {{user.age}}</p>
					<button  v-on:click="userDelete(index)">Delete</button>
				</div>`,
	methods: {
		userDelete: function(index){
			this.$emit('userdelete', index);
		}
	}
});
new Vue({
    el: "#app",
    data: {
        users:[
			{name: 'Tom', age: 23},
			{name: 'Bob', age: 26},
			{name: 'Alice', age: 28}
		]
    },
	methods:{
		remove: function(index){
			this.users.splice(index, 1)
		}
	}
});
</script>
</body>
</html>

Для добавления нового элемента в массив определен компонент userform, который представляет форму добавления. Для вывода одного элемента из массива определен компонент useritem, который также содержит кнопку для удаления элемента.

По сути здесь используются две различные техники для работы с массивами. Компонент userform получает ссылку на массив и при нажатии на кнопку вызывает метод userAdd(), в котором через полученную ссылку в массив добавляется новый элемент.

Компонент useritem использует другую технику. Он получает элемент для вывода и по нажатию на кнопку удаления генерирует событие userdelete, передавая с ним индекс удаляемого элемента. Родительский объект получает это событие с индексом и по индексу собственно удаляет элемент из массива.

То есть мы можем либо напрямую передавать ссылку в дочерний компонент и в нем изменять значения в массиве, либо генерировать в дочернем компоненте событие, которое передается родительскому объекту.

Изменение массивов в Vue.js

Изменение объектов

Для изменения внешних объектов в компоненте можно использовать аналогичные техники. В частности, изменим страницу следующим образом:

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
	<h2>Список пользователей</h2>
    <userform :user="user"></userform>
	<div>
		<useritem v-for="(user, index) in users"
					:key="index"
					:user="user" 
					:index="index" 
					v-on:userchange="change">
		</useritem>
	</div>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
Vue.component('userform', {
	props: ["user"],
	template: `<div>
					<input type="text" v-model="user.name" />
					<input type="number" v-model="user.age" />
				</div>`,
});
Vue.component('useritem', {
	props: ["user", "index"],
	template: `<div>
					<p>Name: {{user.name}} <br> Age: {{user.age}}</p>
					<button  v-on:click="userChange(index)">Change</button>
				</div>`,
	methods: {
		userChange: function(index){
			this.$emit('userchange', index);
		}
	}
});
new Vue({
    el: "#app",
    data: {
        users:[
			{name: 'Tom', age: 23},
			{name: 'Bob', age: 26},
			{name: 'Alice', age: 28}
		],
		user:{}
    },
	methods:{
		change: function(index){
			this.user = this.users[index];
		}
	}
});
</script>
</body>
</html>

Здесь компонент userform через props получает объект user, свойства которого связываются двухсторонней привязкой с полями ввода. При изменении введеных значений в этих полях изменится и значение в массиве:

Изменение объектов в Vue.js

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850