使用Vuejs填充特定输入 - 来自数据库的Laravel

时间:2016-04-19 10:10:27

标签: laravel vue.js select2

请帮助,抱歉,但我是Vuejs的新手,可能有一个简单的问题:

  1. 如何搜索数据并在其他输入标签上填充单个查询

  2. 如何将Vue与select2插件结合使用(与select2结合使用后Vue无效) Need to input form binding to website input field 这是我的代码:

  3. 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::get('/create1/{namapenerima}', function($namapenerima){
            return App\Donee::where('id', $namapenerima)->first();
        });
    

    刀片:

                                <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脚本:

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

    它在网站输入字段中返回id号,我知道有些东西缺失但不知道它是什么

    提前谢谢。

2 个答案:

答案 0 :(得分:2)

您需要创建一个指令来控制vuejs中的其他库。

这是一个例子: https://vuejs.org/examples/select2.html

您的选择

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

答案 1 :(得分:0)

如果你已经登陆这里只是想用一些不会用作输入值的文本填充输入字段,那么在HTML5中你可以使用:

placeholder='some text'