I have a simple todo list for different topics which adds removes and edits data but when i am trying to edit the data from the local storage only the text displayed in the html is changing and not in the local storage. The edit is done by pressing on the edit button where a text box will show up to edit the data.
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.js"></script>
<script src="https://unpkg.com/vue-ls#2.3.3/dist/vue-ls.min.js"></script>
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="todo.topic" placeholder="input todo"
v-on:keyup.enter="addTodo">
<ul>
<li v-for="(todo, index) in todos">
<input v-if="todo.edit" type="text" v-model="todo.topic">
<span v-else>{{todo.topic}} </span>
<button #click="removeTodo(index)">✖</button>
<button #click="todo.edit = !todo.edit">✎</button>
</li>
</ul>
</div>
<script>
Vue.use(VueLocalStorage);
new Vue({
el: '#app',
data(){
return {
todo: {
topic: null,
edit: false
},
todos: null || [],
}
},
watch: {
todos: function(val) {
this.$ls.set('todos', val)
}
},
mounted(){
this.todos = this.$ls.get('todos', this.todos);
var _this = this;
this.$ls.on('todos', function(val) {
_this.todos = val;
});
},
methods:{
addTodo(){
var vm = this;
vm.todos.push({topic:vm.todo.topic,edit: false });
vm.todo = []
},
removeTodo(index){
this.todos.splice(index, 1)
}
}
})
</script>
</body>
</html>
Seems you don't have an edit functionality on your code to edit todos.
I did some modification and added an edit function for it to work. You can check it out here: https://codesandbox.io/s/relaxed-cannon-tj7ef?fontsize=14. After clicking the edit icon, and editing, hit enter.
Here is my modification:
Modified the form in the todos loop:
<input
v-if="todo.edit"
type="text"
v-model="todo.topic"
v-on:keyup.enter="editTodo(todo.topic, index)"
/>
Added a function to edit todo:
editTodo(text, index) {
this.$set(this.todos, index, {
topic: text,
edit: false
});
},
You should change the key name of the local storage. it should be unique. I think it's better if you use vuex and not local storage.
But if you really want the local storage implementation you can do like this.
this.$ls.set('todos-id', val)
So that every local storage will be unique.
Related
I am having a problem where my vue doesn't work correctly.When I press the button it clears out the input(it shouldn't) and does nothing.The variables codigo and payload do not show anything in the screen. Even when I change them via console. It first was having the issue where the 'app' tag wasn't being found by the script even with it on the bottom. To solve it I had to add the line Vue.config.silent=true which made the warning disappear but the code still doesn't work. I am new to vue and web design so expect basic mistakes. I am running it in the 'node' docker image container.
<!DOCTYPE html>
<html>
<head>
<title>Vue test</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue#2/dist/vue.js" ></script >
<script>
Vue.config.silent = true;
</script>
<body>
<h2>Manipulador de Recursos</h2>
<br>
<div id='app'>
<form>
URL do Recurso: <input type="text" v-model="recurso" size=50><br><br>
Repr. do Recurso: <input type="text" v-model="repr" size=100><br><br>
Metodo HTTP:
<button v-on:click="doGet">GET</button>
<button v-on:click="doPost">POST</button>
<button v-on:click="doPut">PUT</button>
<button v-on:click="doDelete">DELETE</button> <br><br><br>
</form>
<b>Retorno:</b><br><br>
Codigo HTTP: <span v-bind:id="codigo"></span>
<br><br>
Payload: <span v-html="payload"></span>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script defer >
var myapp = new Vue({
el: "app",
data: {
"codigo":"",
"payload":"",
},
methods:{
// GET
"doGet" : function() {
console.log("GET")
this.clear();
var url = this.recurso;
axios
.get(url)
.then(function (response) {
this.codigo = response;
this.payload =response.data ;
console.log (response);
})
.catch(function (error){
this.codigo = error;
})
},
// POST
doPost : function() {
console.log("POST")
this.clear();
var url = this.recurso;
var data = this.repr;
axios
.post(url, data)
.then((response) => {
this.codigo = response;
this.payload =response.data ;
console.log(response)
})
.catch((error) => {
this.codigo = error;
})
},
//(...)
}
})
</script>
</html>
You don't want to prevent the click action, as suggested above, but the submit action of the form.
<form #submit.prevent="doGet()">
<!-- form stuff -->
</form>
At first, your methods must be inside methods property:
var myapp = new Vue({
//.......
data: {
codigo: "",
payload: ""
},
methods: {
doGet: function() { /*.......*/},
doPost: function() { /*.......*/}
}
})
and in this example your buttons can do default action (the form sending) so it may be necessary: v-on:click.prevent="doGet()".
This solved it Simple vue app doesn't show anything :
Because you didn't render anything in your root component.
In your index.html, render the app component:
<div id="app"> <app> <!-- html code, buttons etc--> </app> </div>
Adding the tags.
Along with this: adding type="button" to the buttons because since they where inside a forms they refreshed the page.
And finally I added:
document.addEventListener("DOMContentLoaded", function(event) {
Around my var myapp = new Vue({
Here is the problem I am working on.
Attached is an index.html.
Implement the next and previous buttons to navigate to next/previous posts from the API provider (https://jsonplaceholder.typicode.com).
Create a new tag that displays the current post ID.
Bonus points: Create a new array to store all of the previously retrieved posts, and display them in a list.
The API is from jsonplaceholder.typicode.com, so you don't need to implement that. A jsfiddle would be immensely appreciated.
<!DOCTYPE html>
<html>
<head>
<title>Vue Test</title>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css' />
<div id="app">
<h1>{{ message }}</h1>
<div>
<span>{{post.title}}</span>
</div>
<button v-on:click="previousPost">Previous Post</button> <!-- // new vue directive - v-on:click, also -->
<button v-on:click="nextPost">Next Post</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
***emphasized text***crossorigin="anonymous"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Welcome to Vue!',
post: {},
page: 1
},
mounted: function() {
this.getPost()
},
methods: {
nextPost: function() {
this.page = this.page + 1
this.getPost()
// Implement me
},
previousPost: function() {
// Implement me
this.page = this.page - 1
this.getPost()
},
getPost: function() {
var root = 'https://jsonplaceholder.typicode.com';
$.ajax({
url: root + '/posts/' + this.page,
method: 'GET'
})
.then((data) => {
console.log(data);
this.post = data;
});
}
}
})
</script>
<style>
/* Add any additional styles here */
body {
padding: 20px;
}
div {
margin: 12px 0;
}
</style>
I would also like to know what is meant by the post id over there. I have completed one task which shows the next and previous posts, but the other two tasks I am a little confused.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/vue.js"></script>
<meta charset="UTF-8">
<title>V-for example</title>
</head>
<body>
<script type="x/template" id="testTemplate">
<div><h1>{{name}}</h1>
<p>{{Age}}</p></div>
</script>
<div id="example">
<div id="filler">
<template v-for="person in people">
<test-component name="{{person.name}}"></test-component>
</template>
</div>
</div>
<script>
var newComponent = Vue.extend({
template: '#testTemplate',
props: ['name'],
data: function () {
return {
Age: 1010
}
}
});
Vue.component('test-component', newComponent);
new Vue({
el: '#example',
data: {
people: [{
name: 'jason',
age: 15,
complete: true
}, {
name: 'Jeremy',
age: 20,
complete: false
}]
},
ready: function () {
var divoutput = document.querySelector('#filler');
alert(divoutput.innerHTML);
len = this.$data.people.length;
for (i = 0; i < len; i += 1) {
var nameT = this.$data.people[i].name;
divoutput.innerHTML += '<test-component name="' + nameT + '"></test-component>';
}
},
});
</script>
</body> </html>
I'm trying to take all of the people in the Vue data array and inject it into a component and add it to a innerHTML of a div during the Vue.ready() function. I show that result is being injected in to the "filler" array but the components them selves are not being rendered properly. If I make a manual instance of my component it works fine.
You shouldn't try to add Vue component using innerHTML. That's managing the DOM yourself, just let Vue do that on its own. Here is a fiddle:
https://jsfiddle.net/xccjsp4b/
I changed the script template to a div because I'm not certain you can use the script tag like that (although I could be wrong). Then you just use a v-for to loop through the people and pass the relevant data as properties. If each person is going to have their own age, you want it to be a property not a data variable.
Also, use the shorthand binding of :name="person.name" rather than name="{{person.name}}". The : tells Vue to evaluate the expression.
I'm looking for two things:
To push items in a nested array with Angularjs
To understand how it works exactly.
I've been looking for answers on differents previous topic but I didn't manage to come to a solution.
Actually, I want to use an Add Item button to push an item in a items array under a facture object.
Here is my controller:
PlasmaCrm.controller('FacturesSoloController', function($scope, $stateParams, Facture ) {
Facture.get({ id: $stateParams.factureId }, function(data) {
$scope.facture = data;
});
$scope.ajouterItem = function(index, item){
$scope.facture.items[index].item.push({
description: 'Test'
});
}
});
And here is my data structure (as returned by my API)
{
"id":10200,
"client_id":1,
"lead_id":1,
"courtedescription":"Description test",
"etat":"En attente",
"created_at":"2015-02-21 15:07:17",
"updated_at":"2015-02-21 15:07:17",
"items":[
{
"id":1,
"facture_id":10200,
"description":"Item num\u00e9ro 1",
"prix":"15.00",
"tps":"0.75",
"tvq":"1.50",
"grandtotal":"17.25",
"created_at":"2015-02-21 15:07:18",
"updated_at":"2015-02-21 15:07:18"
},
{
"id":2,
"facture_id":10200,
"description":"Deuxi\u00e8me item quoi",
"prix":"135.00",
"tps":"6.75",
"tvq":"13.47",
"grandtotal":"155.22",
"created_at":"2015-02-21 15:07:18",
"updated_at":"2015-02-21 15:07:18"
}
]
}
Of course my HTML contains a button:
<form ng-submit="ajouterItem(item)">
<button class="btn btn-primary">Ajouter un item</button>
</form>
Actually I got an error (undefined) when I press to button. What is wrong?
For those who are still looking for pushing data in the nested array can refer below example of Comments and Replies :
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<!--Comment section-->
<ul ng-repeat="comment in comments track by $index" style="background: skyblue; padding: 10px;">
<li>
<b>Comment {{$index}} : </b>
<br>
{{comment.comment}}
<!--Reply section-->
<ul ng-repeat="reply in comment.reply track by $index">
<li><i>Reply {{$index}} :</i><br>
{{reply.comment}}</li>
</ul>
<!--End reply section-->
<input type="text" ng-model="reply" placeholder=" Write your reply." />Reply
</li>
</ul>
<!--End comment section -->
<!--Post your comment-->
<b>New comment</b>
<input type="text" placeholder="Your comment" ng-model="comment" />
Post
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
//Comments object having reply oject
$scope.comments = [{ comment: 'hi', reply: [{ comment: 'hi inside commnet' }, { comment: 'hi inside commnet' }] }];
//push reply
$scope.insertReply = function (index, reply) {
$scope.comments[index].reply.push({ comment: reply });
}
//push commnet
$scope.newComment = function (comment) {
$scope.comments.push({ comment: comment, reply: [] });
}
});
</script>
</body>
</html>
Since there is no item property inside the items array objects, you cant push to it. You have to add:
$scope.facture.items[index].item = []
before you can push to it. Also check your functions parameters as Marc states in his comment. Since we can't see all of the markup it is unclear what is passed to the function, a simple console.log() will show you that ofcourse.
I found the answer, it was finaly simpler than I first thought:
$scope.ajouterItem = function(){
$scope.facture.items.push({
description: 'Test'
});
}
First, create a variable to fill, delete, and add items. Next, assign this variable to the array inside the model.
PlasmaCrm.controller('FacturesSoloController', function($scope, $stateParams, Facture )
{
$scope.items= [];
Facture.get({ id: $stateParams.factureId }, function(data) {
$scope.facture = data;
$scope.items = $scope.facture.items;
});
$scope.ajouterItem = function(item){
$scope.items.push(item);
$scope.facture.Items = $scope.items;
}
});
In this way, you can also edit the previous information and add new information. Since we first set "items". To remove the same as usual :
$scope.RemoveItem = function (index) {
$scope.facture.Items.splice(index, 1);
};
I have a model, which will be related to a number of other models. Think of a stack overflow question, for example, where it is a question related to tags. The final Object might look as follows before a POST or a PUT:
{
id: 28329332,
title: "checkboxes that append to a model in Angular.js",
tags: [{
id: 5678,
name: "angularjs"
}, {
id: 890,
name: "JavaScript"
}]
}
So far, I have the following controller:
.controller('CreateQuestionCtrl',
function($scope, $location, Question, Tag) {
$scope.question = new Question();
$scope.page = 1;
$scope.getTags = function() {
Tag.query({ page: $scope.page }, function(data) {
$scope.tags = data;
}, function(err) {
// to do, error when they try to use a page that doesn't exist
})
};
$scope.create = function() {
$scope.question.$save(function(data) {
$location.path("/question/" + data.id);
});
};
$scope.$watch($scope.page, $scope.getTags);
}
)
So I display all of the tags, paginated, on the page. I want them to be able to select the given tags and append it to my model so that it can be saved.
How can I create a checkbox interface where it updates the $scope.question with the selected other models?
EDIT: think I might be part of the way there
<div class="checkbox" ng-repeat="tag in tags.objects">
<label><input
type="checkbox"
ng-change="setTag(tag.id)"
ng-model="tag"
> {{ tag.name }}
</div>
Then on the controller
$scope.setTag = function(id) {
Tag.get({id: id}, function(data) {
// don't know what now
})
}
Basically, it takes a directive to approach your goal Take a look at the plunker I wrote for you. As you can see, in the list of selected tags the text property of each tag is displayed, it means that the object structure is kept. In your case, you would bind the $scope.question.tags array as the collection attribute and each tag from the $scope.tags as the element attribute.
Here a codepen for multiple check-boxes bound to the same model.
HTML
<html ng-app="codePen" >
<head>
<meta charset="utf-8">
<title>AngularJS Multiple Checkboxes</title>
</head>
<body>
<div ng:controller="MainCtrl">
<label ng-repeat="tag in model.tags">
<input type="checkbox" ng-model="tag.enabled" ng-change="onChecked()"> {{tag.name}}
</label>
<p>tags: {{model.tags}}</p>
<p> checkCount: {{counter}} </p>
</body>
</html>
JS
var app = angular.module('codePen', []);
app.controller('MainCtrl', function($scope){
$scope.model = { id: 28329332,
title: "checkboxes that append to a model in Angular.js",
tags: [{
id: 5678,
name: "angularjs",
enabled: false
}, {
id: 890,
name: "JavaScript",
enabled: true
}]
};
$scope.counter = 0;
$scope.onChecked = function (){
$scope.counter++;
};
});
I found a great library called checklist-model worth mentioning if anyone is looking up this question. All I had to do was this, more or less:
<div class="checkbox" ng-repeat="tag in tags">
<label>
<input type="checkbox" checklist-model="question.tags" checklist-value="tags"> {{ tag.name }}
</label>
</div>
Found this on googling "directives for angular checkbox".