CODEWITHSUNDEEP
laravelvue.jsjquery-select2
Reint
Reint

Reputation: 165

Populate specific input with Vuejs - Laravel from database

Please help, sorry but I'm new with Vuejs and have maybe a simple problem:

  1. How to search data and populate single query on other input tags

  2. How to combine Vue with select2 plugin (Vue didn't work after I combine with select2) Need to input form binding to website input field here is my code:

populate.js

new Vue({

  el: '#penerima',

  data: {
    namapenerima : '',
  },

  computed: {
    website() {

      var url = "/campaign/create1/" + this.namapenerima;

      this.$http.get(url, function(response){
        return response.website;
      });

      return this.namapenerima;
      // return response.website
    }
  }

});

Route:

Route::get('/create1/{namapenerima}', function($namapenerima){
        return App\Donee::where('id', $namapenerima)->first();
    });

Blade:

                            <div id="penerima">
                              <li>
                                <label>Nama Penerima * </label>
                                <div class="fields-area">
                                  <div class="field-col col-md-12">
                                    <select id="namapenerima" name="namapenerima" v-model="namapenerima" class="form-control">
                                      @foreach ($donee as $d)
                                        <option value="{{ $d->id }}"> {{ $d->donee_name }} </option>
                                      @endforeach
                                    </select>
                                  </div>
                                </div>
                              </li>
                              <li>
                                <label>Website</label>
                                <div class="fields-area">
                                  <div class="field-col col-md-12">
                                    <input type="text" v-model="website">
                                    <span class="char-remain">  </span>
                                  </div>
                                </div>
                              </li>
                            </div>

Select2 script:

$('#namapenerima').select2({
    allowClear: "true",
    placeholder: 'Pilih nama penerima donasi'}).on('select2-opening', function()
    {
        $(this).closest('li');
    });

It return id number in website input field, I know there is something missing but dont know what it is

Thank you in advance.

Upvotes: 1

Views: 2675

Answers (2)

mcmacerson
mcmacerson

Reputation: 943

If you've landed here simply looking to populate the input field with some text that will not be used as an input value, in HTML5 you can use:

placeholder='some text'

Upvotes: 0

marcosrjjunior
marcosrjjunior

Reputation: 281

You need create a directive to control another libraries in vuejs.

Here's an example: https://vuejs.org/examples/select2.html

And your select

<select class="form-control" 
    v-model="namapenerima"
>
    <option v-repeat="d in donee" value="@{{ exam.d }}">@{{ d.donee_name }}<option>
</select>

Upvotes: 2

Related Questions