Многоразовый компонент для ввода vue-tags-input

Question

В настоящее время я использую этот компонент пользовательского интерфейса из http://www.vue -tags-input.com

Я планирую создать повторно используемый компонент для ввода vue-tags-input, вотмой текущий код:

компонентов / пользовательский интерфейс / BaseInputTag.vue

<template>
  <b-form-group :label="label">
    <no-ssr>
      <vue-tags-input
        :value="tags"
        @tags-changed="updateValue"/>
    </no-ssr>
  </b-form-group>
</template>

<script>
  export default {
    name: 'BaseInputTag',
    props:   {
      label: { type: String, required: true },
      value: { type: [String, Number, Array] },
      tags: { type: [Array] }
    }, 
    methods: {
      updateValue(newTags) {
        this.$emit('input', newTags);
      }
    }
  }
</script>

и на моей родительской странице vue.Я вызываю вышеуказанный компонент с этим кодом:

pages / users / new.vue

<BaseInputTag v-model="tag" :tags="interests" label="Interests"/>

<script>
  export default {
    name: 'InsiderForm',
    data() {
      return {
        tag: '', 
        interests: []
      };
    }
  }
</script>

Как я могу отправить обратно дочернему компоненту newTags вданные родителя interests

Answer 1

Мне удалось заставить его работать, вот мой код:

дочерний компонент

<template>
  <b-form-group :label="label">
    <no-ssr>
      <vue-tags-input
        :value="value"
        v-model="tag"
        placeholder="Add Tag"
        :tags="tags"
        @tags-changed="updateValue"/>
    </no-ssr>
  </b-form-group>
</template>

<script>
  export default {
    name: 'BaseInputTag',
    props:   {
      label: { type: String, required: true },
      value: { type: [String, Number, Array] },
      tags: { type: [Array, String] },
      validations: { type: Object, required: true }
    }, 
    data() {
      return {
        tag: ''
      }
    },
    methods: {
      updateValue(newTags) {
        this.$emit('updateTags', newTags);
      }
    }
  }
</script>

и получение изменений в родительский компонент:

<BaseInputTag :tags="interests" @updateTags="interests = $event" label="Interests"/>


<script>
  export default {
    name: 'InsiderForm',
    data() {
      return {
        tag: '', 
        interests: []
      };
    }
  }
</script>

Answer 2

Ты почти у цели!

Родительский компонент:

<BaseInputTag v-model="tag" :tags="interests" @input="doStuffWithChildValue" label="Interests"/>

<script>
  export default {
    name: 'InsiderForm',
    data() {
      return {
        tag: '', 
        interests: []
      };
    },
    methods: {
      doStuffWithChildValue (value) {
        console.log('Got value from child', value)
      }
    }
  }
</script>