[Vuejs]-Emit variable not passing array from child to parent?

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

Leave a comment