vue.jsautocompletedropdownvisual-studio-2022v-for
vue.js dropdown of autocomplete doesn't render when inside of a v-for
New to vue, and this particular project is using vue 2.6.10.
We have a proprietary control that we use which is basically a network user lookup.
I came on to this already established project. It is built using template.html files and their respective .js files.
I have this particular template file where I need a v-for with my lookup control inside. I cannot get the dropdown to render when it is inside of the v-for. If I take out the v-for and hardcode the controls (as a test), the lookup dropdowns render fine.
Please see my two versions of the code, the hardcoded one which works, and the v-for version that does not render my dropdown after a search by name.
One thing I have noticed that is a difference between the 2 versions, is that when I inspect my elements, I see that when the dropdown does render properly, the input control has ui-autocomplete-input as part of the class and also has autocomplete="off". When the control does not work as expected, those two items don't exist in the input control.
Working version:
<template id="email-template">
<div class="container border col-md-12" style="margin-top:10px;">
<tabs style="padding-top:10px;">
<tab title="Task Summary">
<table class="table userForm"> <!--class userForm must be here for nedLookup!!-->
<thead>
<tr>
<th>Email Groups</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<tr>
<td class="col-md-5">
<table class="table table-striped table-condensed table-bordered">
<thead>
<tr>
<th style="width: 10%">Group1 Members</th>
<th style="width: 10%; text-align: center;">AutoInclude</th>
<th style="width: 10%; text-align: center;">Delete</th>
</tr>
</thead>
<tr>
<td>[email protected]</td>
<td>
<span style='display: block; text-align: center; padding-top: 0;'>
<label class="label" style='margin-left: 0'>
<input type="checkbox" style='margin-left: 0' checked>
</label>
</span>
</td>
<td>
<span style='display: block; text-align: center; padding-top: 0;' class='trash-icon'>
<i class='fa fa-trash' style='margin-left: 0'></i>
</span>
</td>
</tr>
<tr>
<td>[email protected]</td>
<td>
<span style='display: block; text-align: center; padding-top: 0;'>
<label class="label" style='margin-left: 0'>
<input type="checkbox" style='margin-left: 0'>
</label>
</span>
</td>
<td>
<span style='display: block; text-align: center; padding-top: 0;' class='trash-icon'>
<i class='fa fa-trash' style='margin-left: 0'></i>
</span>
</td>
</tr>
<tr><td colspan="3"><label><input type="checkbox" name="checkbox"> AutoInclude Entire Group</label></td></tr>
</table>
</td>
<td class="col-md-4">
<input type="text" :id="Group1_userLookup"
:name="Group1_userLookup" value=""
class="nedLookup form-control"
placeholder="Search User by Last Name, FirstName" />
<!--<input id="userLookupEmail" type="hidden" data-ned="Email" />-->
</td>
<td class="col-md-2">
<button type="button" class="btn btn-primary" @click="addUserToGroup()" role="button">
Add User to Group
</button>
</td>
<td class="col-md-1">
<button type="button" class="btn btn-primary" @click="saveGroup()" role="button">
Save Group
</button>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td class="col-md-5">
<table class="table table-striped table-condensed table-bordered">
<thead>
<tr>
<th style="width: 10%">Group2 Members</th>
<th style="width: 10%; text-align: center;">AutoInclude</th>
<th style="width: 10%; text-align: center;">Delete</th>
</tr>
</thead>
<tr>
<td>[email protected]</td>
<td>
<span style='display: block; text-align: center; padding-top: 0;'>
<label class="label" style='margin-left: 0'>
<input type="checkbox" style='margin-left: 0'>
</label>
</span>
</td>
<td>
<span style='display: block; text-align: center; padding-top: 0;' class='trash-icon'>
<i class='fa fa-trash' style='margin-left: 0'></i>
</span>
</td>
</tr>
<tr><td colspan="3"><label><input type="checkbox" name="checkbox"> AutoInclude Entire Group</label></td></tr>
</table>
</td>
<td class="col-md-4">
<input type="text" :id="Group2_userLookup"
:name="Group2_userLookup" value=""
class="nedLookup form-control"
placeholder="Search User by Last Name, FirstName" />
<input id="userLookupEmail" type="hidden" data-ned="Email" />
</td>
<td class="col-md-2">
<button type="button" class="btn btn-primary" @click="addUserToGroup()" role="button">
Add User to Group
</button>
</td>
<td class="col-md-1">
<button type="button" class="btn btn-primary" @click="saveGroup()" role="button">
Save Group
</button>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<div class="text-center">
<btn type="button" class="btn btn-primary" @click="addNewEmailGroup" role="button"><i class="fa fa-plus-circle"></i> Add Email Group </btn>
</div>
</tab>
<!-- Survey Email settings-->
<tab title="Survey">
<table class="table">
<thead>
<tr>
<th>Coming Soon</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</tab>
</tabs>
</div>
</template>
<style scoped>
.emailGroup-header {
cursor: pointer;
}
.emailGroup-header:hover {
background-color: #E7E7E7;
}
</style>
Non working version with v-for:
<template id="email-template">
<div class="container border col-md-12" style="margin-top:10px;">
<tabs style="padding-top:10px;">
<tab title="Task Summary">
<table class="table userForm"> <!--class userForm must be here for nedLookup!!-->
<thead>
<tr>
<th>Email Groups</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="emailGroupMembers in emailGroupMembersAllList">
<td>
<table>
<tr>
<td class="col-md-4">
<table class="table table-striped table-condensed table-bordered">
<thead>
<tr>
<th style="width: 10%">{{emailGroupMembers.EmailGroup.GroupName}} Members</th>
<th style="width: 10%; text-align: center;">AutoInclude</th>
<th style="width: 10%; text-align: center;">Delete</th>
</tr>
</thead>
<tr v-for="user in emailGroupMembers.EmailGroup.EmailGroupUsers">
<td>{{user.Email}}</td>
<td>
<span style='display: block; text-align: center; padding-top: 0;'>
<label class="label" style='margin-left: 0'>
<input type="checkbox" style='margin-left: 0' checked>
</label>
</span>
</td>
<td>
<span style='display: block; text-align: center; padding-top: 0;' class='trash-icon'>
<i class='fa fa-trash' style='margin-left: 0'></i>
</span>
</td>
</tr>
</table>
</td>
<td class="col-md-4">
<input type="text" :id="emailGroupMembers.EmailGroup.GroupName + '_userLookup'"
:name="emailGroupMembers.EmailGroup.GroupName + '_userLookup'" value=""
class="nedLookup form-control"
placeholder="Last Name, FirstName" />
<!--<input id="userLookupEmail" type="hidden" data-ned="Email" />-->
</td>
<td class="col-md-2">
<button type="button" class="btn btn-primary" @click="addUserToGroup()" role="button">
Add User to Group
</button>
</td>
<td class="col-md-2">
<button type="button" class="btn btn-primary" @click="saveGroup()" role="button">
Save Group
</button>
</td>
</tr>
</table>
</td>
</tr>
<!--<tr>
<td>
<table>
<tr>
<td class="col-md-4">
<table class="table table-striped table-condensed table-bordered">
<thead>
<tr>
<th style="width: 10%">Group2 Members</th>
<th style="width: 10%; text-align: center;">AutoInclude</th>
<th style="width: 10%; text-align: center;">Delete</th>
</tr>
</thead>
<tr>
<td>[email protected]</td>
<td>
<span style='display: block; text-align: center; padding-top: 0;'>
<label class="label" style='margin-left: 0'>
<input type="checkbox" style='margin-left: 0'>
</label>
</span>
</td>
<td>
<span style='display: block; text-align: center; padding-top: 0;' class='trash-icon'>
<i class='fa fa-trash' style='margin-left: 0'></i>
</span>
</td>
</tr>
</table>
</td>
<td class="col-md-4">
<input type="text" :id="Group2_userLookup"
:name="Group2_userLookup" value=""
class="nedLookup form-control"
placeholder="Last Name, FirstName" />
<input id="userLookupEmail" type="hidden" data-ned="Email" />
</td>
<td class="col-md-2">
<button type="button" class="btn btn-primary" @click="addUserToGroup()" role="button">
Add User to Group
</button>
</td>
<td class="col-md-2">
<button type="button" class="btn btn-primary" @click="saveGroup()" role="button">
Save Group
</button>
</td>
</tr>
</table>
</td>
</tr>-->
</tbody>
</table>
<div class="text-center">
<btn type="button" class="btn btn-primary" @click="addNewEmailGroup" role="button"><i class="fa fa-plus-circle"></i> Add Email Group </btn>
</div>
</tab>
<!-- Survey Email settings-->
<tab title="Survey">
<table class="table">
<thead>
<tr>
<th>Coming Soon</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</tab>
</tabs>
</div>
</template>
<style scoped>
.emailGroup-header {
cursor: pointer;
}
.emailGroup-header:hover {
background-color: #E7E7E7;
}
</style>
email.js file:
var emailPanel = Vue.component('email-panel', {
props: {
// id: {
// type: Number,
// },
// emailGroupMembersAllList: {
// type: Object
// },
// autoIncludeEmails: {
// type: Object
// },
},
data() {
return {
opened: [],
emailGroupMembersAllList: [],
}
},
template: '#email-template',
beforeMount() {
window.addEventListener("beforeunload", this.handlerClose);
},
beforeDestroy() {
window.removeEventListener("beforeunload", this.handlerClose);
},
mounted() {
$(".userForm").nedLookup();
this.getEmails();
},
computed: {
},
methods: {
getEmails() {
var vm = this;
//go get emails (including current user of this page) and fill GroupLists/to/cc/Subject
this.getTaskSummaryEmails()
.then(data => {
vm.emailGroupMembersAllList = data.EmailGroupMembersAllList;
vm.autoIncludeEmails = data.AutoIncludeEmails;
localStorage.setItem('data', JSON.stringify(data));
})
.catch(function (error) {
console.log(error);
});
},
async getTaskSummaryEmails() {
try {
let resp;
resp = await axios.get(`/api/task/email`);
return resp.data;
} catch (error) {
console.log(error);
this.$toasted.show("There was an error retrieving the email groups", { type: "error", duration: 3000 })
}
},
addNewEmailGroup() {
},
toggleEmailGroup(id) {
const index = this.opened.indexOf(id);
if (index > -1) {
this.opened.splice(index, 1)
} else {
this.opened.push(id)
}
},
tabChanged() {
if (this.$toasted != null) {
this.$toasted.clear();
}
},
handlerClose(e) {
if (this.$toasted != null) {
this.$toasted.clear();
}
},
}
})
I have searched and not found anything matching my particular issue with this old version of vue.js
I have found suggestions regarding using the :key. I am not moving things around, so I don't believe I need the :key, but I tried it anyway to no avail.
Solution
Well, just going back to basics, I added an eventhandler for an outer static element and that solved the issue.
mounted() {
this.getEmails();
//Creating event delegate here for our dynamically added nedLookups
//have to add event listener to element that is already in the DOM and that contains our nedLookup
document.getElementById("emailGroupsTable").addEventListener("click", function (e) {
if (e.target.nodeName == 'INPUT') { //this is one of the nedLookup elements
$(".userForm").nedLookup();
}
});
},
- How to type a wrappers props without preventing it from appearing in attrs?
- Toggle vue-multiselect close/open on button click
- Tracking down the root cause of unexpected reactivity in Vue 3 components
- How to put json variable directly into DIV Class
- Consume API endpoint from Laravel + Inertia App
- How to watch for multiple values in Vue 3 script setup?
- vuejs app isn't running when using cdn: version 3
- Vue - v-if not updating with onMounted
- Vue passing data to child component
- Vue3 - possible to bind prop to background-image in style?
- Vue - passing a data list to child component
- VueJs, difference between computed property and watcher?
- How to cleanup Nuxt js extra div containers?
- Open a dropdown with right click in Vue3 and Vuetify3
- How to globally ignore errors with sentry v5 to reduce noise
- How to change port number in vue-cli project
- How to set URL query params in Vue with Vue-Router
- How to set favicon.ico properly on vue.js webpack project?
- Ionic-storage with vue
- PrimeVue FileUpload - Handle server upload error
- vuetify2 to vuetify3 transition-group no longer working
- Vitest with element plus unplugin unknown extension for scss
- Primevue FileUpload custom error handling
- Input clientWidth and scrollWidth are always equal
- How to redirect in Nuxt's asyncData
- How to prevent a custom field from validating on input with VeeValidate
- Footer flashes during route transition
- Intersection observer not triggering on page load and route back
- Vue 3 Vue-router 4 Composition API - Calling router.push outside of component not working
- Vue3 reactivity of an "external" array