[Vuejs]-Vue async bind data

0👍

Wrap into custom component

Haven’t tested it yet, but maybe it gives you an idea for a solution. You could try wrapping this "v-select" in a custom component of yours.

Parent Component with custom v-model

<template>
  <div>
    <my-custom-select v-if="field.type == 'Multiple'" :field="field" v-model="content_data[field.name]" />
  </div>
</template>

Child Component – the v-model will be handled with prop value and emit of input event. The request will only be made when the component is being rendered, which only is when field.type is Multiple.

<template>
  <div>
    <v-select
      v-model="selection"
      :items="multipleRelationFields"
      :label="field.name"
      @input="onInput"
      />
  </div>
</tempalte>

<script>
export default {
  props : ["value","field"],
  data() {
    return {
      multipleRelationFields = [],
      selection : this.value
    }
  },
  methods : {
    onInput() {
      this.$emit('input', this.selection)
    }
  },
  mounted() {
    this.$axios.get(`/data/${this.field.value}.json`)
    .then(r => {
      this.multipleRelationFields = r.data;
    })
    .catch(err => {

    });
  }
}
</script>

Leave a comment