Populate specific input with Vuejs - Laravel from database

Question

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

How to search data and populate single query on other input tags
How to combine Vue with select2 plugin (Vue didn't work after I combine with select2) 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.

marcosrjjunior · Accepted Answer · 2016-04-19 12:48:08Z

2

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>

answered Apr 19, 2016 at 12:48

marcosrjjunior

2812 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mcmacerson · Accepted Answer · 2017-09-30 17:32:04Z

0

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'

answered Sep 30, 2017 at 17:32

mcmacerson

9432 gold badges15 silver badges18 bronze badges

Collectives™ on Stack Overflow

Populate specific input with Vuejs - Laravel from database

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related