Всем привет)Я новенький в теме vue.js и мне нужна помощь в моём самообучении. У меня есть страница с формой где я могу создавать таски. Они добавляются в массив, а также этот массив сохраняется в localStorage. Вопрос в том как мне сделать редактирование выбранного таска. Сделать так что бы при нажатии на таск он появлялся в отдельном инпуте я сделал, а дальше остановился. Помогите советом ,если есть возможность то и примером, как мне изменить выбранный елемент массива.
const App = {
data(){
return{
editInput:'',
title:'Notes',
input:{
value:'',
placeholder:'Type ur note'
},
notes:['task0','task1','task2']
}
},
watch:{
notes: {
handler(updatedList) {
localStorage.setItem('notes', JSON.stringify(updatedList));
},
deep: true,
}
},
mounted() {
this.getNotes();
}
,
methods:{
info(note,index){
this.editInput = note
},
getNotes(){
const localNotes = localStorage.getItem('notes')
if(localNotes){
this.notes = JSON.parse(localNotes);
}
},
onSubmit(){
this.notes.push(this.input.value)
this.input.value = ''
},
remove(index){
this.notes.splice(index,1)
}
}
}
Vue.createApp(App).mount("#app");
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>#9 Notes</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div class="wrapper">
<div id="app">
<h1>{{title}}</h1>
<form @submit.prevent="onSubmit">
<input type="text" v-model="input.value" :placeholder="input.placeholder" required>
<button>Add new Note</button>
</form>
<div class="notes">
<div class="note" v-for="(note,index) in notes" :key="index">
<p><span @click="info(note,index)">✎</span><span @click="remove(index)">✕</span>
{{note}}
</p>
</div>
</div>
<input type="text" v-model="editInput">
</div>
</div>
<script src="app.js"></script>
</body>
</html>