Выдает переменную, не передающую массив от дочернего элемента к родительскому? - PullRequest
Новая
       19

Выдает переменную, не передающую массив от дочернего элемента к родительскому?

0 голосов
/ 10 июня 2019

Я пытаюсь передать массив тегов из дочернего компонента в родительский компонент с помощью emit.Emit регистрирует и запускает метод в родительском компоненте, но когда я регистрирую аргумент, который я передал через emit, он возвращает undefined.Я не уверен, что делаю неправильно, потому что раньше я передавал объекты через emit.

Я пытался преобразовать массив в объект, передавая его как значение this с тем же именем, не сохраняя его как переменную в самом методе.

//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: {
        tag: this.tagList,
    }
  },
  props: ['tagList'],
  name: 'editTagsForm',
  methods: {
    updateTagsList(newTag) {
      console.log(newTag)
      this.tags.push(newTag)
    }
  },
  components: {
      tagsField,
      tagsList
  }
}
</script>

<style scoped>
</style>

//tagsField.vue
<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() {
          for(var i = 0; i <= this.newTags.length; i++){
              var arr = this.newTags[i]
              this.$emit('incoming', {
                  arr
              })
          }
        }
    }
}
</script>

<style scoped>
</style>```

Ответы [ 2 ]

3 голосов
/ 10 июня 2019 
<tagsField v-on:incoming="updateTagsList()"/>

Должно быть 

<tagsField v-on:incoming="updateTagsList"/>

Если у вас есть круглые скобки, метод будет вызываться как есть, без него он действует как делегат, а параметры будут передаваться в метод.

0 голосов
/ 10 июня 2019 
//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>
...