i use v-for to render title value with select input , but not return any value
my qcm array
[{"_id":"1","title":"test qcm "},{"_id":"2","title":"kkkk"}]
select input
<select name="qcm_list" id="qcm_list" required>
<option value> QCM</option>
<option
v-for="item in qcm"
:value="item._id"
:key="item._id"
>{{item.title}}</option>
</select>
qcm array in vue
data() {
return {
qcm:[]
}}
axios.get('url')
.then(res=>{
this.qcm=res
})
In axios, you must use res.data to get the qcm data, like this:
axios.get(url).then(res => {
this.qcm = res.data
}).catch(err => {
//handle when an error occur
})
Your JSON structure is incorrect, you're missing a " after "_id it should be:
[{"_id":"1","title":"test qcm"},{"_id":"2","title":"kkkk"}]
Related
I need to get the item ID of the selected item, In my case the user types in the input and gets results from an API in form of array that iterates the <Option> as below.
<Select
mode="multiple"
style={{ width: '100%' }}
placeholder="Select Invoices"
defaultValue={[]}
onChange={handle_select_invoices}
optionLabelProp="label"
onSearch={search_invoice_by_number}
>
{
invoices.map((el,index) => {
return <Option key={el.invoice_id} value={el.invoice_number}></Option>
})
}
</Select>
When user select an option, the handle_select_invoices is fired. It takes two params value and key.
const handle_select_invoices =(value,key) => {
console.log(' ************** IDS ****************')
console.log(key)
}
function search_invoice_by_number(value) {
var data={'invoice_number':value};
axios.post('http://localhost:4000/get_invoice_by_number',data).then(
response => {
if(response.data.length > 0){
set_invoices(response.data);
}else{
set_invoices([]);
}
},error =>{
Swal.fire({
title: 'Error!',
text: 'Please Contact your software developer',
icon: 'error',
confirmButtonText: 'OK'
})
}
)
}
The problem
When user selects multiple items, the console.log shows an empty Json elements and only the last element in the array is filled.
What is wrong in the code that leads to this result?
Alright, I think I understand what you mean. Here is how I suggest you do it. Use a variable in state that keeps track of selectedValues. In select onChange just set them in state like handleChange = values => setSelectedValues(values). In search, after you get the new data from the API, filter the selectedValues like so:
set_invoices(response.data);
const values = selectedValues.filter(value =>
data.map(i => i.invoice_number).includes(value)
);
setSelectedValues(values); // filter out the values that do not exist in the new data
and your select would contain an additional prop value={selectedValues}.
Here is a working example with some dummy data: https://codesandbox.io/s/pedantic-carson-xwydd?file=/src/App.js:699-805
I want to make my dropdown list options changes when I click a button in my form.
I have a form with 3 buttons (Accounting, Department & Cashier)
I want my Transaction dropdown list to change options depending on what department has been chosen.
I already have this JSON array for each department:
What I want is when I click a button, the option will change too in my transaction dropdown.
For example, if I click registrar, only the registrar options will be available on the dropdown.
For now, this is my vue script for pulling the arrays for options:
<script>
const app = new Vue({
el:'#transactions',
data:{
trans:{}
},
mounted(){
this.getTrans();
},
methods:{
getTrans(){
axios.get('http://localhost/dqrs/api/transactions')
.then((response)=>{
this.trans=response.data
console.log(this.trans.acc);
})
.catch(function (error){
console.log(error);
});
}
}
})
</script>
And I just want to ask too if this is right for pulling my values for transaction:
The whole code should be like this:
Don't need to call getTrans() function on mounted.
Make template.
Define button click function
<script>
const app = new Vue({
el:'#transactions',
data:{
trans:{},
options: []
},
mounted(){
axios.get('http://localhost/dqrs/api/transactions')
.then((response)=>{
this.trans=response.data;
this.options = this.trans.cas;
})
.catch(function (error){
console.log(error);
});
},
methods:{
btnClick: function(category) {
if (category == 'cash') {
this.options = this.trans.cas;
} else if (category == 'account') {
this.options = this.trans.acc;
} else {
this.options = this.trans.reg;
}
}
})
</script>
<template>
<div>
<div class="d-flex">
<button v-on:click="btnClick('cash')"></button>
<button v-on:click="btnClick('account')"></button>
<button v-on:click="btnClick('register')"></button>
</div>
<select v-for="option in options" :key="option.id">
<option disabled selected>Choose Transaction...</option>
<option value="option.val">{{option.name}}</option>
</select>
</div>
</template>
how to pass selected item from select option field to api.in vuejs
<select :v-model="selectedRole" class="custSelect" >
<option v-for="option in options"
v-bind:value="option.value">
{{option.role}}
</option>
</select>
below is my script
const SignupData={
occupation:this.selectedRole
}
axios.post('http://34.61.88.0:3000/api/newuser',SignupData)
.then(function(response) {
console.log("dds",SignupData)
})
I think 'v-model' can be set for options.
or
const SignupData={
occupation:this.selectedRole.value
}
you have to pass your params in a object, you have two options:
with desctructoring of your SignupData const
axios.post('http://34.61.88.0:3000/api/newuser', {
...SignupData,
})
or
axios.post('http://34.61.88.0:3000/api/newuser', {
occupation: this.selectedRole,
})
How do you guys get the text inside a p tag and store it in a variable in VueJS?
Because right now, it just displays it in a p tag but I want the text inside the p tag to be stored in a variable for later use.
Below is my html code
<b-form-input v-model="search" placeholder="Search by disease"></b-form-input>
<select v-model="selected">
<option v-for="result in filteredPeople(search)" :key="result.LONG_D" :value="{ id: result.LONG_D, text: result.ICD_C }">{{ result.LONG_D }}</option>
</select>
<p>
Value: {{selected.id}}
</p>
<b-button class="btn" variant="success" v-on:click="runAPI(search)">Search</b-button>
And this one is my JS code.
export default {
data() {
return {
results: {},
search: "",
msg: null,
selected: ""
};
},
methods: {
runAPI: function(disease) {
axios
.get("http://localhost:9000/api/disease/" + disease)
.then(response => (this.results = response.data))
.catch(error => console.log(error));
console.log(this.results);
},
filteredPeople() {
if (this.searchQuery) {
return this.results.filter(item => {
return item.LONG_D.startsWith(this.searchQuery);
});
} else {
return this.results;
}
}
}
One way would be to put a function in the tag that takes the value (it could also of course return the value so the display wouldn't change). The function could then store the value in a data or local variable and you would have it.
like so:
{{getSelectedId(selected.id)}}
anything inside {{}} is JS so you can have functions and even use logic (although not so recommended to put too much logic in template).
You can do like this .
JS CODE
export default {
data() {
return {
results: {},
search: "",
msg: null,
selected: ""
};
},
methods: {
runAPI: function(disease) {
axios
.get("http://localhost:9000/api/disease/" + disease)
.then(response => (this.results = this.filteredPeople()))
.catch(error => console.log(error));
console.log(this.results);
},
filteredPeople() {
if (this.searchQuery) {
return this.results.filter(item => {
return item.LONG_D.startsWith(this.searchQuery);
});
} else {
return this.results;
}
HTML CODE
<select v-model="selected">
<option
v-for="result in results"
:key="result.LONG_D"
:value="{{ id: result.LONG_D, text: result.ICD_C }}">{{ result.LONG_D }}</option>
</select>
i want to create filter drop down list on another selections in ejs ,both drop down list from mongo data base ..what should i do ?
im susing node js
<label>Gender</label>
<select placeholder="Enter Your Gender">
<option selected>Select Your Gender</option>
<option>Male</option>
<option>Female</option>
</select>
<label>Title </label>
<select name="title" placeholder="Enter Your Title">
<%for(let t of title){%> //we can write(var ms = 0;ms< status.length; i++)instead of (let ms of maritalstatus)
<option value="<%= t.male_english%>"><%= t.male_english%></option>
<%}%>
</select>
app.js
app.get('/data-en', function(req, res, next) {
let data = {} // data will send to page
// get data from database
db.collection('religious_category').find({}).toArray().then(religious => {
data.religious = religious
db.collection('list_of_marital_status').find({}).toArray().then(maritalstatus => {
data.maritalstatus = maritalstatus
db.collection('list_of_countries').find({}).toArray().then(countries => {
data.countries = countries
db.collection('honorifi_Title').find({}).toArray().then(title => {
data.title = title
res.render('data-en', data) // at the end
})
})
})
})
})
app.post('/data-en', (req, res, next) => {
db.collection('newperson-en').insertOne(req.body, () => {
res.redirect('/data-en')
})
})
i have in database list of data for male and female
i want when press on gender as male's list of title appear male titles and vice
You are passing an object called data to your template and you are trying to access an object named title.
You have to pass the properties of your object directly to your template:
res.render('data-en', {
title: data.title,
religious: data.religious,
maritalstatus: data.maritalstatus,
countries: data.countries
});