I populate a dropdown, based on the result of another dropdown. And if i got a default value i want to set the second dropdown.
select country so i get al the country regions.
If i am on my edit page i already have the country id, so i trigger the ajax request on created() and populate the regions select.Ofc i have the region id and i would like to set it.
getRegions() {
let countryId = this.form.country_id;
if (countryId) {
axios.get('/getRegion/' + countryId)
.then(response => {
this.regions = response.data;
if (this.regions && this.form.country_region_id) {
this.$nextTick(() => {
$(".country_region").dropdown("set selected",
this.form.country_region_id).dropdown("refresh");
});
/*
setTimeout(() => {
$(".country_region").dropdown("set selected",
this.form.country_region_id).dropdown("refresh");
}, 1000);
*/
}
})
.catch(error => {
this.errors.push(error)
});
}
},
The code segment with the setTimeout is working 1sec later the correct value is selected.
Edit:
My dropdown actually got a wrapper component, so i can use v-model on it.
But the nextTick still doesnt seem to work.
<sm-dropdown v-model="form.country_region_id" class="country_region">
<input type="hidden" :value="form.country_region_id" id="country_region_id">
<div class="default text">Gebiet</div>
<i class="dropdown icon"></i>
<div class="menu">
<div v-for="region in regions" class="item" :data-value="region.country_region_id"
:key="region.country_region_id" >
{{ region.internal_name }}
</div>
</div>
</sm-dropdown>
Dropdown component:
<template>
<div class="ui fluid search selection dropdown" ref="input">
<slot></slot>
</div>
</template>
<script>
export default {
props: ['value'],
mounted() {
let self = this;
$(this.$el)
.dropdown()
.dropdown({
forceSelection: false,
onChange: function(value) {
self.$emit('input', value);
self.$emit('change');
}
}).dropdown("refresh")
;
}
}
</script>
Related
I have created an app that requests from an API the data and creates flexboxes. Now I added a search box and I would like to filter the articles by their contact and/or title.
I've also created a computed property to filter the returned list of items but when I replace in line 11 the paginated('items') with paginated('filteredArticles') that returns nothing.
What did I do wrong?
<template>
<div id="app">
<div class="search-wrapper">
<input type="text"
class="search-bar"
v-model="search"
placeholder="Search in the articles"/>
</div>
<paginate ref="paginator" class="flex-container" name="items" :list="items">
<li v-for="(item, index) in paginated('items')" :key="index" class="flex-item">
<div id="image"><img :src="item.image && item.image.file" /></div>
<div id="date">{{ item.pub_date }}</div>
<div id="title"> {{ item.title }}</div>
<div class="article">{{item.details_en}}</div>
</li>
</paginate>
<paginate-links for="items" :limit="2" :show-step-links="true"></paginate-links>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
items: [],
paginate: ["items"],
search:'',
};
},
created() {
this.loadPressRelease();
},
methods: {
loadPressRelease() {
axios
.get(`https://zbeta2.mykuwaitnet.net/backend/en/api/v2/media-center/press-release/?page_size=61&type=5`)
.then((response) => {
this.items = response.data.results;
});
},
},
computed:{
filteredArticles() {
return this.items.filter(item=>item.includes(this.search))
}
}
};
</script>
You need fields you want to search and connvert search string and fields with toLowerCase() or toUpperCase():
computed : {
filteredArticles() {
if (!this.search) return this.items
return this.items.filter(item => {
return (item.title.toLowerCase().includes(this.search.toLowerCase()) || item.contact.toLowerCase().includes(this.search.toLowerCase()));
})
}
}
Your computed doesn't seem correct. Since items is an array of objects, you'd need to do this:
filteredArticles() {
if (!this.search) {
return this.items;
}
return this.items.filter(item => {
return item.title.includes(this.search);
})
}
Note that this will only search the title field, and it's case sensitive.
How can I pass the page_id to the Sidebar component method highlightNode(), because I want to highlight a newly added item. My current code is the page id is undefined.
This is my code & structure.
my root component is Sidebar.vue
<template>
<div>
<ul>
<li v-for="page in pages">
<div :class="{ 'highlight': highlightedNode == page.id }">
<router-link :to="'/view/' + page.id" #click.native="highlightNode(page.id)">
<span v-title="page.title"></span>
</router-link>
</div>
</li>
</ul>
</div>
</template>
export default {
data () {
return {
pages: [],
highlightedNode: null
}
},
mounted() {
this.getPages()
this.$root.$refs.Sidebar = this
},
methods: {
getPages() {
axios.get('/get-pages').then(response => {
this.pages = response.data
});
},
highlightNode(id) {
this.highlightedNode = id
},
}
}
my add new Page component AddNewPage.vue
<template>
<div>
<div class="main-header">
<div class="page-title">
<input type="text" v-model="page.title" class="form-control">
</div>
</div>
<div class="main-footer text-right">
<button class="btn btn-success btn-sm" #click="saveChanges()">Save and Publish</button>
</div>
</div>
</template>
export default {
data () {
return {
page: {
title: null,
},
}
},
mounted() {
//
},
methods: {
saveChanges() {
axios.post('/store-new-filter', this.page)
.then(response => {
const id = response.data.id // return page id
this.$root.$refs.Sidebar.highlightNode(id) // <-- this line, I want to pass page id to hightlight the newly added page.
})
.catch( error => {
})
},
}
}
Or any alternative way to achieve my expected output.
Thanks in advance.
I am facing an issue with my autocomplete component. whenever i type anything into the input field the input is reset.I mean it does not let me type anything.It just keeps getting reset before i could fully type anything.
main.js
Vue.component('g-autocomplete', {
props: ['list','value','title'],
data() {
return {
input: '',
}
},
template: `<template>
<div class="autocomplete">
<input style="font-size: 12pt; height: 36px; width:1800px; " type="text" v-model="input" #input="handleInput"/>
<ul v-if="input" >
<li v-for="(item, i) in list" :key="i" #click="setInput(item)" >
<!-- {{ autocompleteData }} -->
<template v-if="title!='manager'">
<div class="container">
<p>
<b>ID:</b>
{{item.id}}
</p>
<p>
<b>Description:</b>
{{item.description}}
</p>
</div>
</template>
<template v-else>
<div class="container">
<p>
<b>ID:</b>
{{item.id}}
</p>
<p>
<b>First Name:</b>
{{item.firstName}}
</p>
<p>
<b>Last Name:</b>
{{item.lastName}}
</p>
</div>
</template>
</li>
</ul>
</div>
</template>`,
methods: {
handleInput(e) {
console.log('inside handleInput')
this.$emit('input', e.target.value)
},
setInput(value) {
console.log('inside setInput')
this.input = value
this.$emit('click', value)
},
},
watch: {
$props: {
immediate: true,
deep: true,
handler(newValue, oldValue) {
console.log('new value is'+newValue)
console.log('old value is'+oldValue)
console.log('value inside handler'+this.value)
console.log('list inside handler'+this.list)
console.log('title inside handler'+this.title)
this.input=this.value
}
}
// msg(newVal) {
// this.msgCopy = newVal;
// }
}
})
i reuse the above component from diffrent vue pages's like this-
<b-field label="Custom Business Unit">
<g-autocomplete v-on:input="getAsyncDataBusinessUnit" v-on:click="(option) => {updateValue(option.id,'businessUnit')}" :value="this.objectData.businessUnit" :list="dataBusinessUnit" title='businessUnit' >
</g-autocomplete>
</b-field>
my debounce function that is called when something is typed into the input field.
getAsyncDataBusinessUnit: debounce(function(name) {
if (!name.length) {
this.dataBusinessUnit = [];
return;
}
this.isFetching = true;
api
.getSearchData(this.sessionData.key,`/businessunit/?filter={id} LIKE '%25${name}%25' OR {description} LIKE '%25${name}%25'`)
.then(response => {
this.dataBusinessUnit = [];
response.forEach(item => {
this.dataBusinessUnit.push(item);
});
})
.catch(error => {
this.dataBusinessUnit = [];
throw error;
})
.finally(() => {
this.isFetching = false;
});
}, 500),
what could be the issue here ? Also i noticed that the issue doesn't happen if i comment out the body of the debounce function.So therefore i feel there is something in the debounce function that is causing this.I will try to isolate the problem but i want to understand what exactly is causing this issue. Plz help?
Ok, the question is vague, but I have a code that looks like this:
<template>
<div>
<p v-if="users" v-for="user in users"> {{ user.name}} </p>
<p v-else> No users found</p>
</div>
</template>
<script>
export default {
data() {
return {
users: null
}
},
created() {
var that = this
axios.get('...').then(response => {
that.users = response.data
}).catch(error => { .... })
}
}
</script>
So, the actuall script has no issues, it loads the users and shows it properly. But, always I see the No users founds before vuejs loads the users. I don't want to see that messages, unless users is null but it seems vue doesn't wait for that to be true before showing the v-else.
Is there any proper way to handle this
Instead of using users for the if/else, use a loading property (you would probably need it anyway to present a loading state to the user):
<template>
<div>
<p v-if="!loading && users.length" v-for="user in users"> {{ user.name}} </p>
<p v-else> No users found</p>
</div>
</template>
<script>
export default {
data() {
return {
users: null,
loading: true
}
},
created() {
var that = this
axios.get('...').then(response => {
that.users = response.data
that.loading = false
}).catch(error => {that.loading = false .... })
}
}
</script>
I think this code is better:
<template>
<div>
<p v-for="user in users"> {{ user.name}} </p>
<p v-if="isLoaded && user.length === 0"> No users found</p>
</div>
</template>
<script>
export default {
data() {
return {
isLoaded: false,
users: []
}
},
created() {
var that = this
axios.get('...').then(response => {
that.users = response.data
that.isLoaded = true
}).catch(error => { .... })
}
}
</script>
I am not able to populate the updated data to the child component when doing on-change from a select box with local data/object. But I am able to load data to the child component everytime when I click the submit button with the help of API. I need help to refresh my child component with my updated data when I do the on-change from the select box. Find the below code which I'm trying. That too when I do on-change first time it was updating the props in child component, but when I do the same it is not going to the child component, it stops i the parent component itself.
Component-1:
<template>
<div>
<div class="row">
<select v-model="selectedemp" #change="filterempdata($event.target.value)">
<option value="">Select emp/option>
<option v-for="option in empfilterlist" v-bind:value="option.value" v-bind:key="option.value">{{ option.text }}</option>
</select>
</div>
<div class="compone">
<empView v-if='loaded' :empDetails='empData'></empView>
</div>
<div class="col-lg-6 col-md-6">
<button type="button" id="btn2" class="btn btn-danger btn-md" v-on:click="getEmpDetails">Fetch Data</button>
</div>
</div>
</template>
<script>
import updatedemp from './empView'
export default {
name: 'cluster',
components: {
'empView': updatedemp
},
data () {
return {
loaded: false,
emptData: {},
empfilterlist: [
{ text: 'Department', value: '1' },
{ text: 'Status', value: '2' },
],
selectedemp: '',
}
},
methods: {
filterempdata: function (selectedoption) {
console.log('Onchange value - ' + selectedOption)
Vue.set(this.empData, 'Department', selectedoption)
},
getEmpDetails: function () {
this.$http.get('http://localhost:7070/getemmdata')
.then((response) => {
this.empData = response.data
this.loaded = true
},
response => {
console.log('test' + JSON.stringify(response))
}
)
}
}
}
</script>
Component: 2
<template>
<div class="empView">
<div class="col-lg-6 col-md-6">
<h3>{{ empid }}</h3>
</div>
<div class="col-lg-6 col-md-6">
{{ empname }}
</div>
</div>
</template>
<script>
export default {
name: 'empView',
props: ['empDetails'],
data () {
return {
empid: this.empDetails.id,
empname: this.empDetails.name
}
},
watch: {
workflowDetails: function (changes) {
console.log('data updated ' + JSON.stringify(changes))
this.empid = changes.id
this.empname = changes.name
this.department = changes.Department
}
}
}
</script>
Your first problem is here:
filterempdata: function (selectedoption) {
console.log(')
this.empData.WorkflowFilter = selectedoption
this.empData = this.empData
}
By default, empData is:
data () {
return {
loading: false,
emptData: null,
So this.empData.WorkflowFilter = selectedoption should not work, as well as this.empData = this.empData does nothing.
Just make the default value an empty object and update it according to selection (just setting WorkflowFilter).
This should do the trick. Another weird this is the loading property. Your second component will be visible only if loading = true, which is odd. Maybe use loaded instead?