An example fiddle
Created to demonstrate fiddle in "Fiddle with Vue.js" article.
HTML
<!-- Explicit dependency. Using Vue 2.2.1 -->
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<!-- App mount target -->
<div id="app"></div>
JavaScript
// An example component.
const HelloComponent = {
name: 'Hello',
template: `
<h1>Hello {{ name }}!</h1>
`,
props: {
name: {
type: String,
required: true
}
}
}
// Create the app.
new Vue({
el: '#app',
template: `
<vue-tags-input
class="tags-input"
v-model="tag"
:tags="tags"
:allow-edit-tags="true"
@tags-changed="newTags => tags = newTags"
:autocomplete-items="items">
<div
slot="autocompleteItem"
class="my-item"
slot-scope="props"
@click="props.performAdd(props.item)">
<i class="material-icons" :style="{ color: props.item.iconColor }">
{{ props.item.text }}
</i>{{ props.item.text }}
</div>
<div
slot="tagLeft"
class="my-tag-left"
slot-scope="props"
@click="props.performOpenEdit(props.index)">
<i class="material-icons" :style="{ color: props.tag.iconColor }">
{{ props.tag.text }}
</i>
</div>
</vue-tags-input>
`,
computed: {
version: () => Vue.version
},
components: {
HelloComponent
}
})