Vue
by lid0
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.2/vuetify.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.2/vuetify.min.js"></script>
<v-app id="app">
<h2>Todos:</h2>
<div>
<label for="">v-autocomplete</label>
<v-autocomplete :items="stuff" :auto-select-first="true" v-model="selected" ></v-autocomplete>
</div>
{{selected}}
</v-app>
CSS
@import url(//fonts.googleapis.com/icon?family=Material+Icons);
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}
Vue
new Vue({
el: "#app",
data: {
selected: "",
stuff: [
"aaa",
"bbb",
"ccc",
"ddd",
/* { text: "Learn JavaScript", done: false },
{ text: "Learn Vue", done: false },
{ text: "Play around in JSFiddle", done: true },
{ text: "Build something awesome", done: true } */
],
},
methods: {
toggle: function(todo){
todo.done = !todo.done
}
},
mounted(){
this.selected = this.stuff[0]
this.stuff.unshift("DSADAS")
console.log( this.stuff)
}
})