Надо сделать так, чтобы при изменении в input'е (который появляется при клике на сам таск) изменялся сам таск и изменялся в localStorage. В моём случае получается, что данный таск заносится в localStorage, но и этот момент удаляет остальные и потом не отображается.
lightStorage = {
storage:{},
getItem(id){return this.storage[id];},
setItem(id,value){return this.storage[id]=value;}
}
var keyLocal = 'vue-js'
var todoStorage = {
fetch: function () {
var todos = JSON.parse(lightStorage.getItem(keyLocal) || '[]');
return todos;
},
save: function (todos) {
lightStorage.setItem(keyLocal, JSON.stringify(todos));
}
}
var app = new Vue({
el: '#taskApp',
data: {
search: '',
inputVal: '',
changeVal: '',
editingTask: '',
show: false,
tasks: [
{
name: '',
status: false
}
],
},
watch: {
tasks: {
handler: function(tasks) {
todoStorage.save(tasks);
}
}
},
mounted() {
tasks = todoStorage.fetch()
},
methods: {
// Добавление таска
addTask: function(e) {
e.preventDefault();
if(this.inputVal){
this.tasks.push({
name: this.inputVal,
status: false,
});
}
},
// Удаление таска
deleteTask: function(task) {
let index = this.tasks.indexOf(task)
this.tasks.splice(index, 1)
},
// Редактирование таска
editTask: function (task) {
this.editingTask = task;
},
// Окончание редактирования и занесение
endEditing: function (todos) {
this.editingTask = lightStorage.setItem(keyLocal, JSON.stringify(todos)) // Вносит данные в массив в Value в Local Storage
}
},
computed: {
filtered () {
return this.tasks.filter((tasks) =>{
return tasks.name.match(this.search)
})
}
}
})
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.min.js'></script>
<div class="container col-sm-8 col-sm-offset-2">
<div id="taskApp">
<div class="inf">
<h2 class='text-center'>Лист с делами</h2>
<form v-on:submit='addTask'>
<div class="col-sm-8 mb">
<input type="text" class='form-control' v-model="inputVal" placeholder="Добавить">
</div>
<div class="col-sm-4 mb">
<input type="submit" value='Добавить' class='btn btn-primary btn-block'>
</div>
<div class="search-wrapper">
<input type="text" v-model.trim="search" placeholder="Поиск" class="search"/>
</div>
</form>
</div>
<div>
<ul v-for='(task, index) in filtered'>
<li><span v-if="task !== editingTask" @click="editTask(task)">{{ task.name }}</span><input type="text" v-if="task === editingTask" v-auto-focus class="left" @keyup.enter="endEditing(task)" v-model="task.name"></li>
<li><button class="btn btn-danger btn-block" v-on:click="deleteTask(task)">Удалить</button></li>
</ul>
</div>
</div>
</div>
lightStorage = {
storage: {},
getItem(id) {
return this.storage[id];
},
setItem(id, value) {
return this.storage[id] = value;
}
}
var keyLocal = 'vue-js'
var todoStorage = {
fetch: function() {
var todos = lightStorage.getItem(keyLocal)
return (typeof todos !== "undefined") ? JSON.parse(todos) : []
},
save: function(todos) {
lightStorage.setItem(keyLocal, JSON.stringify(todos));
}
}
var app = new Vue({
el: '#taskApp',
data: {
search: '',
inputVal: '',
changeVal: '',
editingTask: '',
show: false,
tasks: [],
},
watch: {
tasks: {
handler: function(tasks) {
todoStorage.save(tasks);
}
}
},
mounted() {
this.tasks = todoStorage.fetch()
},
methods: {
// Добавление таска
addTask: function(e) {
e.preventDefault();
if (this.inputVal) {
this.tasks.push({
name: this.inputVal,
status: false,
});
}
},
// Удаление таска
deleteTask: function(task) {
let index = this.tasks.indexOf(task)
this.tasks.splice(index, 1)
},
// Редактирование таска
editTask: function(task) {
this.editingTask = task;
},
// Окончание редактирования и занесение
endEditing: function() {
this.editingTask = null
todoStorage.save(keyLocal, JSON.stringify(this.tasks))
}
},
computed: {
filtered() {
return this.tasks.filter(task => task.name.match(this.search))
}
}
})
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.min.js'></script>
<div class="container col-sm-8 col-sm-offset-2">
<div id="taskApp">
<div class="inf">
<h2 class='text-center'>Лист с делами</h2>
<form v-on:submit='addTask'>
<div class="col-sm-8 mb">
<input type="text" class='form-control' v-model="inputVal" placeholder="Добавить">
</div>
<div class="col-sm-4 mb">
<input type="submit" value='Добавить' class='btn btn-primary btn-block'>
</div>
<div class="search-wrapper">
<input type="text" v-model.trim="search" placeholder="Поиск" class="search" />
</div>
</form>
</div>
<div>
<ul v-for='(task, index) in filtered'>
<li><span v-if="task !== editingTask" @click="editTask(task)">{{ task.name }}</span><input type="text" v-if="task === editingTask" v-auto-focus class="left" @keyup.enter="endEditing(task)" v-model="task.name"></li>
<li><button class="btn btn-danger btn-block" v-on:click="deleteTask(task)">Удалить</button></li>
</ul>
</div>
</div>
</div>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Нужно сделать на странице надпись с фоновым изображениемТакже нужно применить для фона паралакс эффект
Знания php у меня сырые, решил потренироваться с парсингом данных с сайта с помощью phpQuery остановился в самом начале и уже довольно продолжительное...
ЗдравствуйтеНе могу понять, что за хрень такая: вставляю класс копипастом - ошибка, пишу в ручную - нет ошибки