JSFiddle - React, Tailwind, and code Playground

by Dian Carlos Cabral dos Santos

HTML

<form class="busca" action="" v-on:submit.prevent="muda_pagina()">

    <select v-model="area_atual">
        
        <option :value="''">Selecione uma área</option>
        <option v-for="(dados, index) in areas" :key="index" :value="dados.links">{{ dados.nome }}</option>
        
    </select>
    
    <select v-model="url_atual" :disabled="area_atual == '' ? true : false">
           
        <option :value="''">Selecione uma página</option>
        <option v-for="(dados, index) in area_atual" :key="index" :value="dados.url">{{ dados.nome }}</option>
        
    </select>
    
    <button type="submit">OK</button>
    
</form>

JavaScript

new Vue({

	el: '.busca',
    
    data : {
    
    	area_atual: '',
        url_atual: '',
        areas: [
        	
            {
            
            	nome: 'Area 1',
                links : [
                	
                	{ nome : 'Link 1', url: 'http://google.com' },
                    { nome : 'Link 2', url: 'http://yahoo.com' },
                    { nome : 'Link 3', url: 'http://uol.com.br' },
                    { nome : 'Link 4', url: 'http://globo.com' },
                    { nome : 'Link 5', url: 'http://g1.globo.com' }
                
                ]
            
            },
            
            {
            
            	nome: 'Area 2',
                links : [
                
                	{ nome : 'Link 1', url: 'http://google.com' },
                    { nome : 'Link 2', url: 'http://yahoo.com' },
                    { nome : 'Link 3', url: 'http://uol.com.br' },
                    { nome : 'Link 4', url: 'http://globo.com' },
                    { nome : 'Link 5', url: 'http://g1.globo.com' }
                
                ]
            
            }
        
        ]
    
    }

});