mercredi 27 décembre 2017

How get json from Laravel and render him in select form in vuejs2 component

I am trying to put json data in select form in vue commponent using v-for and v-model

export default {
  data() {
      return {
          categories:[]
      }
  },
  mounted() {
      let app = this;
      axios.post('/api/v1/categories/')
          .then(function (resp) {
              app.categories = resp.data;
          })
          .catch(function () {
              alert("Could not load your categorie")
          });
  },

}

Laravel route in web.php

Route::get('categories/create', 'Api\V1\CategoriesController@index')->name('companies.create');

Method in categories controller

public function index()
{
    return Categorie::all();
}

select form in vue commponent

<div class="row">
                <div class="col-xs-12 form-group">
                    <label class="control-label">Equipe</label>
                    <select v-model="categories">
                      <option v-for="categorie in categories" v-bind:value="categorie.cat_id">
                        
                            </option>
                    </select>
                </div>
              </div>

error

[Vue warn]: Property or method "categories" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire