I have a props that render into my child component, and i've displayed the value of props into my input. The initial value would be the
student ID
<form #submit.prevent="insertScore">
<td v-for>
<input type="text" :value="classlist.id" />
</td>
<button type="submit">save</button>
</form>
in my data function
props: ["classlists"],
data() {
return {
form: new Form({
studentId: []
})
};
},
//insertScore
How do i save my initial value into my form.studentId, and i also need this to pass into my store controller in laravel
This is my classlists props
[
{"student": "Ebony Hand", "gender": "female", "id": 1 },
{"student": "Maryse Orn", "gender": "male", "id": 2 },
{"student": "Dr. Maverick Steuber", "gender": "male", "id": 3 },
{"student": "Korbin Rutherford", "gender": "male", "id": 4 }
]
put in a created (or mounted) lifecycle method and set it there.
like so:
created(){
this.form.studentId = this.studentId (assuming thats what the prop is called)
You can use the v-model directive to create two-way data bindings on form input, textarea, and select elements.
<input v-model="message" placeholder="edit me">
To use v-model with form.studentId[n]:
form should be a data property.
form.studentId should be an array.
Then you can do the following:
<div v-for='classlist in classlists'>
<input v-model="form.studentId[classlist.id]">
</div>
data() {
form: {
studentId: []
}
}
Related
I am learning graphql and using strapi as a backend nuxt as a front end
I have set up the backend and am now trying to display the results
I have the following code, it is returning the results but I cannot for the life of me figure out how to display just the name field, can you assist
<template>
<div>
<!-- Events are displayed here -->
<div
v-for='organisation in organisations'
:key='organisation.id'
>
test {{ organisation }}
</div>
</div>
</template>
<script>
import gql from "graphql-tag";
export default {
data() {
return {
};
},
apollo: {
organisations: gql`
query organisations {
organisations {
data {
attributes {
name
}
id
}
}
}`
}
};
</script>
returns
test [ { "attributes": { "name": "Organisation 1", "__typename": "Organisation" }, "id": "1", "__typename": "OrganisationEntity" }, { "attributes": { "name": "test2", "__typename": "Organisation" }, "id": "2", "__typename": "OrganisationEntity" } ]
test OrganisationEntityResponseCollection
if i try {{ organisation.name }} it returns no error but nothing displayed, if I try {{ organisation.attributes.name }} i get an error
Thanks
Ah, I should have had
v-for='organisation in organisations.data'
in my v-for, now working
Template
the category is API JSON Response asenter image description here
[{ "id": 1, "name": "sadi" }, { "id": 2, "name":"kurtha" }, { "id": 3, "name": "shirt" }]
it throw error by Uncaught (in promise) TypeError: this.options.concat is not a function
Error Image
<div v-if="category">
{{ category }}
<VueMultiselect
class="text-dark"
track-by="name" label="name"
v-model="form.category"
:options="category"
:loading="true">
</VueMultiselect>
</div>
But if I store the same response in the array manually it works,
Template
<div v-if="category">
{{ category }}
<VueMultiselect
class="text-dark"
track-by="name" label="name"
v-model="form.category"
:options="api"
:loading="true">
</VueMultiselect>
</div>
Script
const api = [
{ "id": "1", "name": "sadi" },
{ "id": "2", "name": "kurtha" },
{ "id": "3", "name": "shirt" }
];
Error when I put category API response
Working Image but manuall
if i use postman the data to get profile like this
{
"status": "success",
"status_code": 200,
"message": "OK",
"data": {
"id": 2,
"name": "ahsan",
"email": "ahsan#gmail.com",
"email_verified_at": "2019-12-24 08:40:35",
"password": "$2y$10$cr3bRfqZ3Fp3uxnqgInNCugwAdSNury3Nsn6GMl9T36kxT.36GmzS",
"remember_token": null,
"created_at": "2019-12-24 08:40:35",
"updated_at": "2019-12-24 08:40:35",
"member_pin": "xxxxxxx",
"google2fa_secret": null,
"google_2fa enum \"\"Y\"\",\"\"N\"\",": "N",
"reff_id": ""
}
}
how to get value? because the data not array format?
i have tried using v-for all data will be showing not rendering like list array format
You can use Object.keys to get all keys as array and use v-for to get values
var app = new Vue({
el: '#app',
data:{
test:{
"status": "success",
"status_code": 200,
"message": "OK",
"data": {
"id": 2,
"name": "ahsan",
"email": "ahsan#gmail.com",
"email_verified_at": "2019-12-24 08:40:35",
"password": "$2y$10$cr3bRfqZ3Fp3uxnqgInNCugwAdSNury3Nsn6GMl9T36kxT.36GmzS",
"remember_token": null,
"created_at": "2019-12-24 08:40:35",
"updated_at": "2019-12-24 08:40:35",
"member_pin": "xxxxxxx",
"google2fa_secret": null,
"google_2fa enum \"\"Y\"\",\"\"N\"\",": "N",
"reff_id": ""
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="app">
<div v-for="key in Object.keys(test.data)"><strong>{{key}}</strong> : {{test.data[key]}}</div>
</div>
Another way to loop in vuejs v-for="key,index in test.data"
var app = new Vue({
el: '#app',
data:{
test:{
"status": "success",
"status_code": 200,
"message": "OK",
"data": {
"id": 2,
"name": "ahsan",
"email": "ahsan#gmail.com",
"email_verified_at": "2019-12-24 08:40:35",
"password": "$2y$10$cr3bRfqZ3Fp3uxnqgInNCugwAdSNury3Nsn6GMl9T36kxT.36GmzS",
"remember_token": null,
"created_at": "2019-12-24 08:40:35",
"updated_at": "2019-12-24 08:40:35",
"member_pin": "xxxxxxx",
"google2fa_secret": null,
"google_2fa enum \"\"Y\"\",\"\"N\"\",": "N",
"reff_id": ""
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="app">
<div v-for="key,index in test.data"><strong>{{key}}</strong> : {{test.data[index]}}</div>
</div>
In your case you just need to store the response data in the data property like user and then simply write following code in your HTML template:
{{ user.email }}
You might not need v-for unless you have multiple users.
Consider the following component as an example (for multiple users).
<template>
<div>
<h1>Users</h1>
<table class="table">
<thead>
<tr>
<th scope="col">Email</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users" :key="user.email">
<td> {{ user.email }} </td>
<td>{{ user.first_name }}</td>
<td>{{ user.last_name }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
users:null,
}
},
created() {
this.getUsers(); // Will make Laravel API call
},
methods: {
getUsers(){
this.axios.get("https://reqres.in/api/users").then((response) => {
this.users = response.data.data;
});
}
}
}
</script>
I'm trying to output values from an axios promise to my vue component. So far I'm still getting an error [Vue warn]: Error in render: "TypeError: Cannot read property 'surname' of null". Below is what my code looks like
<template>
<div>
{{user.surname}}
</div>
</template>
<!-- ----------------------------------------------------------------------------------- -->
<script>
export default {
name: 'EmployeeCard',
data(){
return{
user: null
}
},
methods:{
getUser(){
axios.get('/api/users/'+ this.$route.params.id)
.then ( response => {
this.user = response.data.data;
})
}
},
mounted(){
this.getUser();
}
}
</script>
This is the actual data returned from the api
{
"data": [
{
"data": {
"id": 11,
"surname": "Hand",
"first_name": "Westley",
"other_name": "Collier",
"email": "ole48#example.com",
"phone_number": "306-755-6192 x493",
"birthday": "06/21/1991",
"company_id": 3,
"department_id": 6,
"job_id": 1,
"state_id": 11,
"marital_status": "married",
"gender_id": 2,
"photo": null,
"is_admin": 0,
"date_of_employment": null,
"job": {
"id": 1,
"title": "HR Manager",
"comment": null,
"created_at": "2019-10-30 17:38:42",
"updated_at": "2019-10-30 17:38:42"
},
"department": {
"id": 6,
"name": "Technical",
"created_at": "2019-10-30 17:38:43",
"updated_at": "2019-10-30 17:38:43"
},
"gender": {
"id": 2,
"name": "Female",
"created_at": "2019-10-30 17:38:42",
"updated_at": "2019-10-30 17:38:42"
},
"company": {
"id": 3,
"name": "Cometshipping",
"created_at": "2019-10-30 17:38:42",
"updated_at": "2019-10-30 17:38:42"
},
"employmentstatus": {
"id": 1,
"name": "Full Time Permanent",
"comment": null,
"created_at": "2019-10-30 17:38:42",
"updated_at": "2019-10-30 17:38:42"
}
}
}
]
}
<template>
<div>
{{surname}}
</div>
</template>
<!-- ----------------------------------------------------------------------------------- -->
<script>
export default {
name: 'EmployeeCard',
data(){
return{
user: null
}
},
computed: {
surname () {
if (this.user) {
return this.user.surname
}
}
}
methods:{
getUser(){
axios.get('/api/users/'+ this.$route.params.id)
.then ( response => {
this.user = response.data[0].data;
})
}
},
mounted(){
this.getUser();
}
}
</script>
Your user variable will initially be null, and you can't get properties from a null value. Therefore, you should replace {{ user.surname }} With {{ user ? user.surname : '' }}.
Another issue is that the data property from your response is an array, not an object, so in your mounted hook you can't do this.user = response.data.data. Instead, you should do this.user = response.data[0].data.
That way, while your user isn't fetched you'll display an empty text instead of getting an error.
Also, I suggest you add a catch hook to your promise to tend to any possible errors.
<template>
<div>
{{ user.surname }}
</div>
</template>
<script>
export default {
name: 'EmployeeCard',
data(){
return{
user: {}
}
},
methods:{
getUser(){
axios.get('/api/users/'+ this.$route.params.id)
.then ( {data} => {
this.user = data[0].data;
})
}
},
mounted(){
this.getUser();
}
}
</script>
I have 2 select dropdown boxes, one for home types and another for duration, i have been able to fetch data into the hometype dropdown but the duration dropdown is not fetching data.
Anyone, please help resolve
This is a vue component
<script>
export default {
mounted() {
console.log('Component mounted.')
},
data(){
return {
selectedHomeType: 0,
HomeTypes: [],
selectedDuration: 0,
durations: []
}
},
methods:{
getHousetypes: function(){
axios.get('api/getHousetypes')
.then(function (response) {
this.HomeTypes = response.data;
}.bind(this));
},
getDuration: function() {
axios.get('api/getDuration',{
params: {
house_type_id: this.selectedHomeType
}
}).then(function(response){
this.Durations = response.data;
}.bind(this));
}
},
created: function(){
this.getHousetypes()
}
}
</script>
<template>
<div>
<div class=" col-xs-4 text-center">
<label>Select HomeType:</label><div class="col-xs-4 text-center">
<select name="Housetype" class='form-control centre' v-model='selectedHomeType' #change='getHousetypes()'>
<option value='0' >Select HomeType </option>
<option v-for='HomeType in HomeTypes' :value='HomeType.id' v-bind:key="HomeType.id">
{{ HomeType.House_Type }}
</option>
</select>
</div>
</div>
<div class="form-group col-xs-4 text-center">
<div class="form-group">
<label>Select Durations:</label>
<select class='form-control' v-model='selectedDuration'>
<option value='0' >Select Durations</option>
<option v-for='duration in durations' :value='duration.id' v-bind:key="duration.id">
{{ duration.duration }}
</option>
</select>
</div>
</div>
</div>
</template>
Sample JSON Data
Data for Hometypes
{
"success": [
{
"id": 1,
"created_at": "2019-09-26 08:44:00",
"updated_at": "2019-09-26 08:43:58",
"House_Type": "1 Bedroom",
"status": "1"
},
{
"id": 2,
"created_at": "2019-09-26 08:44:00",
"updated_at": "2019-09-26 08:43:58",
"House_Type": "2 Bedroom",
"status": "1"
},
{
"id": 3,
"created_at": "2019-09-26 08:44:00",
"updated_at": "2019-09-26 08:43:58",
"House_Type": "3 Bedroom",
"status": "1"
},
{
"id": 4,
"created_at": "2019-09-26 08:44:00",
"updated_at": "2019-09-26 08:43:58",
"House_Type": "3 Bedroom Penthouse",
"status": "1"
},
{
"id": 5,
"created_at": "2019-09-26 08:44:00",
"updated_at": "2019-09-26 08:43:58",
"House_Type": "4 Bedroom",
"status": "1"
}
]
}
Data for Durations
[
{
"id": 13,
"created_at": "2019-09-26 08:46:15",
"updated_at": "2019-09-26 08:46:17",
"house_type_id": 5,
"duration": "9 Months",
"status": "1"
},
{
"id": 14,
"created_at": "2019-09-26 08:46:15",
"updated_at": "2019-09-26 08:46:17",
"house_type_id": 5,
"duration": "6 Months",
"status": "1"
},
{
"id": 15,
"created_at": "2019-09-26 08:46:15",
"updated_at": "2019-09-26 08:46:17",
"house_type_id": 5,
"duration": "3 Months",
"status": "1"
}
]
See Image RepresentationOn Select HomeType 1 Bedroom Durations for 1 Bedroom show display eg 3 months, 6 months and 9 months in the Durations Select Box
I think you mistakenly connected the wrong ajax method to the change event on the house type select box.
I think your logic is to update durations when you change the house type, but you are currently refreshing the house types available:
<select name="Housetype" class='form-control centre' v-model='selectedHomeType' #change='getDuration()'>
<option value='0' >Select HomeType </option>
<option v-for='HomeType in HomeTypes' :value='HomeType.id' v-bind:key="HomeType.id">
{{ HomeType.House_Type }}
</option>
</select>
Update
Make sure your variable names are correct throught the code.
For example, you first define durations variable, but then try to assign this.Durations (notice the capital letter).
This might not be the issue, but may be confusing for other programmers.
I would suggest to use snake_case or camelCase to name your variables and stick to that convention you have chosen in your code. Usually, PascalCase is used for class names.
To quickly read more about different types of casing, check out this medium post
Update #2
To display data in Vue you can use {{ your_variable_here }} syntax anywhere in your component template.
That's really simple, just put the printing syntax where you need in the html template.
For example, to print the selection you can check if selectedHomeType's value is different than 0 (because 0 would be "Select HomeType"'s index) with the v-if directive. Then inside this div put the code that you want to display when the given if condition is true.
In there you can use the selectedHomeType value to get the chosen element from the homeTypes array.
<div v-if="selectedHomeType !== 0">
<p>The selected HomeType is: {{ this.homeTypes[selectedHomeType - 1].House_Type }}</p>
</div>