Skip to content

Instantly share code, notes, and snippets.

@rleger

rleger/index.html

Created July 16, 2015 06:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rleger/ddddf2e3b11d56a47b47 to your computer and use it in GitHub Desktop.
Save rleger/ddddf2e3b11d56a47b47 to your computer and use it in GitHub Desktop.
Download ZIP
Tags with VueJs and FlatUI Pro from Designmodo
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Tags</title>
<link rel="stylesheet" type="text/css" href="css/vendor/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/flat-ui-pro.min.css">
<script src="vue-js.min.js"></script>
</head>
<body>
<div id="v-app">
<div class="tagsinput-primary">
<div class="bootstrap-tagsinput">
<span class='tag label label-info' v-repeat="tag: tags">
{{ tag }}
<span v-on="click: delete($index)" data-role="remove"></span>
</span>
<input type="text" v-model="input" v-on="keyup:newTag | key 'enter'" placeholder=""></div>
</div>
<h6>Debug</h6>
<pre> {{ tags | json }} </pre>
<pre> {{ input }} </pre>
</div>
<script type="text/javascript">
new Vue({
el: '#v-app',
data: {
input: '',
tags: ['First', 'Second']
},
watch: {
'tags': function() {
// Remove leading and trailing spaces
this.tags = this.tags.map(function(i){
return i.trim();
});
}
},
methods: {
newTag: function() {
if(this.isValid(this.input)){
this.tags.push(this.input);
this.input = "";
}
},
delete: function(tagId) {
event.preventDefault();
this.tags.splice(tagId, 1);
},
isValid: function(input) {
return input !== "";
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment