У меня есть таблица в приложении Vue. js, в которой указаны URL и Id. Этот URL-адрес определяется пользователем, поэтому я создал и ввел компонент с текстом ввода, используя URL-адрес в качестве значения и Id в качестве параметра. V-модель этого компонента представляет собой массив, в котором мне нужно хранить данные в виде JSON объектов, таких как:
{
"id": 1,
"url": "www.some-url.com"
}
Как я могу отловить изменения в поле URL и вернуть его родительский элемент для добавления в массиве?
Компонент:
<template>
<div class="row">
<div class="col-md-12">
<input type="text"
class="form-control"
v-model="value.url">
</div>
</div>
</template>
<script>
export default {
name: 'inputUrl',
props: {
url: {
type: [String],
description: 'URL'
},
id: {
type: Number,
description: 'Id'
}
},
components: {
}
data() {
return {
value: {
id: this.id,
url: this.default
}
};
},
methods: {
},
mounted() {
},
watch: {
}
}
</script>
Использование:
<inputUrl
:id="1"
url="www.some-url.com"
v-model="array">
</inputUrl>