Wie übergeben Wert an vuemultiselect aus der Datenbank bei Bearbeitung

Question

Ich habe eine Laravel Form und bin mit Vue Multiselect, um mehrere Benutzer auszuwählen. Ich speichere diese Benutzer in meiner Datenbank. Beim Bearbeiten kann ich die Benutzer holen, aber ich weiß nicht, wie man sie anhängt.

{!! Form::open(['route' => 'store', 'files'=>true]) !!} 
..... 
<drop-down 
     :options="options" 
     :selected.sync="selected" 
     :show-label="true" 
     ></drop-down> 
..... 
{{Form::close}} 

Die Komponente sieht wie folgt aus:

<template> 
    <div> 
     <div> 
      <label class="typo__label">Select Users to be notified</label> 
       <multiselect v-model="value" :options="options" :multiple="true" :close-on-select="false" 
          :clear-on-select="true" :hide-selected="true" 
          placeholder="Select User" label="name" 
          track-by="name"></multiselect> 
     </div> 

     <div v-if="value"> 
       <input id="user_group" v-model="value" name="user_group" type="hidden"> 
     </div> 
    </div> 
</template> 

<script> 
    import Multiselect from 'vue-multiselect' 

    export default { 
     components: {Multiselect}, 
     data: function() { 
      return { 
       value: [], 
       options: [] 
       } 
      }, 
     methods: { 
      getUsers: function() { 
       this.$http.get('/api/get/users').then(function (response) { 
        this.options = response.data; 
       }, function (response) { 
        console.log(response) 
       }); 
      } 
     }, 
     created: function() { 
      this.getUsers(); 
     } 
    }; 
</script> 

Was ich möchte in der Lage sein, um die Benutzer zu sehen, ich aus dem Backend bestanden haben gezeigt werden, wenn ich die Bearbeitungsform wie folgt laden: Außerdem, wie die ausgewählten Benutzer angezeigt werden, falls es einen Validierungsfehler gibt, der beim Erstellen zurückleitet.

Answer 1

Nun, ich habe keinen Weg gefunden, dies mit Vue-Multiselect zu tun, aber ich fand eine bessere Lösung. Select2

Pros

• Es hat sich sowohl einzelne und mehrere Auswahlmöglichkeiten
• Es ermöglicht Ihnen, Ihre normale select-Tags zu verwenden, bedeutet dies, dass es genau wie ein normaler wählen funktioniert.
• Es ist durchsuchbar
• und viele mehr ...

In vue müssen Sie eine benutzerdefinierte Richtlinie wie folgt verwenden:

Installieren Sie das Plugin npm

require('select2');

Vue.directive('select', { twoWay: true, inserted: function (el) { $(el).select2(); } });

Dann können Sie die Richtlinie wie folgt verwenden:

Laravel Way

Multiple

{!! Form::select('users[]', $users,'' ,['required'=>'required', 'v-select'=>'', 'multiple'])!!}

Einzel

{!! Form::select('user', $users,'' ,['required'=>'required', 'v-select'=>''])!!}

Normale HTML

<select placeholder="Search People" name="" id="" v-select> 
      <option v-for="user in users" :value="user.id">{{ user.name }}</option> 
    </select> 

Answer 2

Der einfachste Weg ist @change in Eingabefeld in Ihrem Kind Komponente zu handhaben, dann emittiert das Ereignis this.$emit('selected') und in übergeordneter Komponente behandelt das Ereignis @selected='yourHandler' und die notwendige Verarbeitung auslösen.