Help Request with VUE JS Variable

Asked

Viewed 24 times

0

I use the v-model to play the value for the variable categoria_selecionada, I own a API that searches the subcategory in the database by following the address as per id past, for example passing the value 2 would be: 

categories/2/subcategories

The question that I need to pass the value of this variable, passed through a <select>, leaving the search link similar to this:

categories/{{categoria_selecionada}}/subcategories


mounted() {
    this.buscarCategoriasProfissional()
    this.buscarSubCategoriasProfissional()
},
methods: {
    buscarCategoriasProfissional() {
        request.get(app.api + 'categories', ).then(response => {
            this.categoria_profissional = response.data.data
        })
    },
    buscarSubCategoriasProfissional() {
        request.get(app.api + 'categories/' + {{categoria_selecionada}} + '/sub_categories',).then(response => {
            this.sub_categoria_profissional = response.data.data                     
        })
    }
}

json vue.js

  • Remove the keys "{{categoria_selected}}" leaving only "categoria_selected". You may need to call with "this." or "vm." depending on how your scope is.

1 answer

0

You can create a computed Property that is mounted based on the value of data.categoria_selecionada.

Something like:

new Vue({
    el: '#app',
    data: () => ({
        categorias: {
            1: 'Categoria 1',
            2: 'Categoria 2',
            3: 'Categoria 3',
            4: 'Categoria 4',
            5: 'Categoria 5',
        },
        categoria_selecionada: 2,
    }),
    computed: {
        url_categoria() {
            return `/categories/${this.categoria_selecionada}/subcategories/`
        }
    }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <select v-model="categoria_selecionada">
    <option v-for="(texto, valor) in categorias" :key="valor" :value="valor">
      {{ texto}}
    </option>
  </select>
  
  <p>{{ url_categoria }}</p>
</div>

Browser other questions tagged json vue.js

You are not signed in. Login or sign up in order to post.