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