vue-tags-input 的可重用组件

问题描述

我目前正在使用来自 http://www.vue-tags-input 的这个 UI 组件.com

我打算为 vue-tags-input 创建一个可重用的组件，这是我当前的代码:

I'm planning to create a reusable component for vue-tags-input, here's my current code:

components/UI/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 页面中.我用这个代码调用上面的组件:

and in my parent vue page. I'm calling above component with this code:

pages/users/new.vue

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

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

如何将子组件的 newTags 发送回父组件的数据 interests

How can I emit back the child component's newTags to parent's data interests

推荐答案

我设法让它工作了，这是我的代码:

I managed to make it work, here's my code:

子组件

<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>

并接收对父组件的更改:

and to receive the changes to parent component:

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


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

这篇关于vue-tags-input 的可重用组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！