working with Vue js and Laravel REST API. database is mysql. but when try show ContactList it is not displaying here.. web.php
Route::prefix('api')->group(function() {
//get contact
Route::get('getContacts','ContactController@getContacts');
});
ContactController.php
class ContactController extends Controller
{
public function getContacts() {
$contacts = Contact::all();
return $contacts;
}
}
ContactList.vue
<tbody v-for="contact in contacts" :key="contact.id">
<tr>
<th scope="row"></th>
<td></td>
<td></td>
<td></td>
<td></td>
<td><button class="btn btn-danger btn-sm">Delete</button></td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name:'Contact',
created() {
this.loadData();
},
methods: {
loadData() {
let url = this.url + '/api/getContacts';
this.axios.get(url).then(response => {
this.contacts = response.data
console.log(this.contacts);
});
},
mounted() {
console.log('Contact List Component Mounted');
},
data() {
return {
url: document.head.querySelector('meta[name="url"]').content,
contacts:[]
}
}
}
}
</script>
console displaying following error **[Vue warn]: Property or method "contacts" 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. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> at resources/js/components/ContactList.vue **
from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/3E0unh9
via IFTTT
Aucun commentaire:
Enregistrer un commentaire