I'm facing an issue where I am attempting to trigger a modal on each tab item, however the modal only opens on the initial tab. Clicking on any other item results in the modal opening on the first tab instead.
Additionally, when I add new items, I am unable to open a modal. Initializing with tabs = [] is not effective. How can this be resolved?
Take a look at this example.
Each of the three tabs is currently set to target the same modal. To differentiate them, ensure they have separate IDs/hrefs.
Vue.use(VueTabs);
new Vue({
el:"#app",
data:{
tabs: ['First tab', 'Second tab', 'Third tab']
},
methods: {
removeTab(index){
this.tabs.splice(index, 1)
},
addTab(){
this.tabs.push('New Tab');
var vm = this;
setTimeout(function(){
var elems = document.querySelectorAll('#modal'+(vm.tabs.length-1));
M.Modal.init(elems);
},100);
}
},
mounted() {
document.addEventListener('DOMContentLoaded', function() {
M.AutoInit()
var elems = document.querySelectorAll('.modal');
M.Modal.init(elems);
})
}
}).tab-close{
float:right;
}
.tab-close:hover{
transform: rotate(7deg);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://rawgit.com/cristijora/vue-tabs/master/dist/vue-tabs.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/cristijora/vue-tabs/master/themes/material.css">
<link rel="stylesheet" href="https://rawgit.com/lykmapipo/themify-icons/master/css/themify-icons.css">
<div id="app">
<button @click="addTab">Add new tab</button>
<vue-tabs type="pills">
<v-tab v-for="tab,index in tabs" :key="tab">
<div slot="title">{{tab}} <span @click.stop="removeTab(index)" class="ti-close tab-close"></span></div>
{{tab}}
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" :href="'#modal'+index">Modal_{{index}}</a>
<!-- Modal Structure -->
<div :id="'modal'+index" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
</v-tab>
</vue-tabs>
</div>I've implemented a feature where each row in a table has a button that triggers a pop-up modal when clicked. I want these buttons to display tooltips when hovered over and when focused. Below is an example of the HTML structure: <link hr ...
Transitioning to the latest production version of Angular has been quite challenging for me. I have meticulously followed the migration guidelines, focusing mainly on the underscore prefix \ private attributes section that seemed relevant to my situa ...
As I continue to enhance my website at , I have encountered an issue with the menu functionality. The menu is dynamically generated through JavaScript, scanning a folder for pages and populating them into an array. While this system functions smoothly ove ...
Hey there! I'm working on a node.js app where I need to utilize setImmediate() to recursively call a function while maintaining its context for the next iteration. Let's take a look at an example: var i=3; function myFunc(){ console.log(i ...
I'm encountering an issue with Next.js where my code is not working as expected. Interestingly, the same code works perfectly fine in other templates. let subTotal = 0 if (selectedProducts?.length) { for (let id of selectedProducts) { ...
Just getting the hang of Sails.js, so any help is appreciated. I've used an XML service and successfully converted it to JSON using xml2js var req = https.request(options, function(res) { var xml = ''; res.on('data', fun ...
Does anyone have advice on deploying a next.js application with a custom express backend to either a VPS or Heroku? ...
Currently, I am fetching a list of companies from Firestore and attempting to display them as options in a dropdown menu. While the companies state is being populated correctly from Firestore, the options are not being created or updated dynamically. How c ...
I'm trying to create a function where selecting an option from one dropdown menu will display the corresponding value in another column. For instance, if someone chooses "3" from the first dropdown, the value displayed in the third column should be "3 ...
Is there a way to create a grid layout where items with showDefault: true are always displayed at the top, and then users can click an arrow button to expand the grid and also show the items with showDefault: false? Any suggestions on how to achieve this? ...
Does anyone have suggestions on how to set variables in my environment files? Website_Base_URL=https://${websiteId}.dev.net/api In the code, I have: websiteId = 55; and I would like to use config.get('Website_Base_URL'); to retrieve the compl ...
Recently, I created a drag and drop game to enhance my jQuery UI skills. However, I am facing an issue where the circle cannot be dropped on the square with the same color. Also, when it does work, the circle ends up behind the square instead of on top. It ...
Could someone help me with AngularJS validation? I'm new to it and trying to make sure everything is correct. var app=angular.module('myApp',[]) app.controller('myController',function($scope){ $scope.clickMe = function(){ if($(& ...
I am attempting to implement the following <script> $(document).ready( function() { var data = 'testing' $("#about").on("click", function() { $("#main-content").load("/about.html"); ...
I have created a file to store filters linked to my Vue object, and it is being imported into my App.js. One of the filters I have needs to use another filter: Vue.filter('formatDateTime', value => { if (value) return moment(String(value ...
I'm currently implementing the jQuery Nestable plugin to build a menu editor for a website. After users click on menu items and rearrange their positions, I need to retrieve the item's ID and its Children. Challenge: I'm struggling with ...
I have been attempting to use Axios in my vue.js project to make HTTP requests. Despite reviewing the Axios documentation on GitHub and exploring various examples online, I have yet to find a solution. My goal is to create a configuration file where I can ...
I am attempting to link the same action to 3 checkboxes, with a different outcome for each: var checkboxes = { 'option1' : 'result1', 'option2' : 'result2', 'option3' : 'result3', }; ...
I am currently working on creating a dynamic header using Vue within a Nuxt application. However, I have encountered a couple of challenges: 1) I am struggling to populate the template in the original DOM with the content from an external file, which was ...
I need assistance with handling the value from a dropdownlist in my JavaScript function. The function works well if the value is not Null, but I want to replace a Null value with the static value "asc" before passing it to the next function. function g ...