Using data inside component with Vuejs

Question

just starting with VueJS and trying to figure out how to use multiple components inside vue instance with separated data and methods.

so my HTML looks like that

<div class="modal fade" id="modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">

        <add-domain v-if="component === 'add-domain'">
            <div class="modal-header">
                <h5 class="modal-title">Add domain</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i aria-hidden="true" class="ki ki-close"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>URL (*)</label>
                    <input type="text" class="form-control" v-model="url" />
                </div>
                <div class="form-group">
                    <button @click="submit" class="btn btn-primary">
                        Add
                    </button>
                </div>
            </div>
        </add-domain>

    </div>
</div>

right now there is only one component "add-domain" but there should be more.

my Vue script

    var Modal = new Vue({
    el: '#modal',
    data: {
        component: false
    },
    components: {
        'add-domain': {
            data: function() {
                return {
                    url: ''
                }
            },
            methods: {
                submit: function() {
                    console.log(this.url);
                }
            },
            template: '<div><slot></slot></div>'
        }
    }
})

as you can see i set "v-model="url" at my html input, and trying to change it inside "add-domain" component, but it's not working, same goes for the "submit" method inside "add-domain" component.

not sure what exactly i do wrong.

Thank's in advance.

Answer 1

This is how I would recommend rewriting your code:

1. Define your add-domain component before you mount your Vue app to keep things more organised and easy to read.
2. Pass down the methods and data from your component that you will need inside your <slot> content.
3. Create a changeUrl method in your component and pass this down as well to allow your slot content to update the URL value.

const addDomain = {
  data: function () {
    return {
      url: ""
    };
  },
  methods: {
    submit: function () {
      console.log(this.url);
    },
    changeUrl(ev) {
      this.url = ev.target.value;
    },
  },
  template:
    `<div>
      <slot :url='url' :submit='submit' :changeUrl='changeUrl'>
      </slot>
    </div>`
};

var Modal = new Vue({
  el: "#modal",
  data: {
    component: false
  },
  components: {
    addDomain
  }
});

// HTML:
<add-domain v-if="component === 'add-domain'" v-slot="{ url, changeUrl, submit }">
  ...
  <input
    type="text"
    class="form-control"
    :value="url"
    @input="changeUrl"
  />
  ...
</add-domain>