0๐
โ
//tagsField
<template>
<div class="input-group">
<form>
<input-tag v-model="newTags"></input-tag><br>
<input type="button" value="submit" v-on:click="addTag()" class="btn btn-secondary btn-sm">
</form>
</div>
</template>
<script>
export default {
data: function () {
return {
newTags: [],
}
},
methods: {
addTag() {
const newTags = this.newTags;
this.$emit('incoming', newTags)
this.newTags = []
}
}
}
</script>
<style scoped>
</style>
//edittagsform
<template>
<div class="card">
<div class="card-body">
<div class="form-inputs">
<h5>Add tags:</h5>
<tagsField v-on:incoming="updateTagsList"/><br>
<h5>Current tags:</h5>
<div v-if="tags.length > 0">
<tagsList v-for="tag in tags" v-bind:tag="tag"/>
</div>
<div v-else>
<p>No tags associated</p>
</div>
</div>
</div>
</div>
</template>
<script>
import tagsField from './tagsField'
import tagsList from './tagsList'
export default {
data: function () {
return {
tags: this.tagList
}
},
props: ['tagList'],
name: 'editTagsForm',
methods: {
updateTagsList(newTags) {
console.log(newTags)
for(var i = 0; i < newTags.length; i++) {
console.log(i)
this.tags.push(newTags[i])
}
}
},
components: {
tagsField,
tagsList
}
}
</script>
<style scoped>
</style>
๐คthelacaning
3๐
<tagsField v-on:incoming="updateTagsList()"/>
Should be
<tagsField v-on:incoming="updateTagsList"/>
When you have the parentheses, then the method will be called as is, without, it acts as a delegate and the parameters will flow through to the method.
๐คFisch
Source:stackexchange.com