Skip to content

Instantly share code, notes, and snippets.



Created Jul 16, 2015
What would you like to do?
Tags with VueJs and FlatUI Pro from Designmodo
<!DOCTYPE html>
<html lang="en">
<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>
<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>
<input type="text" v-model="input" v-on="keyup:newTag | key 'enter'" placeholder=""></div>
<pre> {{ tags | json }} </pre>
<pre> {{ input }} </pre>
<script type="text/javascript">
new Vue({
el: '#v-app',
data: {
input: '',
tags: ['First', 'Second']
watch: {
'tags': function() {
// Remove leading and trailing spaces
this.tags ={
return i.trim();
methods: {
newTag: function() {
this.input = "";
delete: function(tagId) {
this.tags.splice(tagId, 1);
isValid: function(input) {
return input !== "";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment