DEV Community

Alam487
Alam487

Posted on

Here i want to display a component based on category selection

here i want to display the component based on category selection. If we enter a single family home in below category field then i want to display the 3rd component similar if we are entering other category then different component should display


placeholder="Search your category"
name="category" @change="onChange($event)"
v-model="step1_category" maxlength="200" id="id_post_type" :rules="inputRules">

this is 3rd component




this is 4th component




this is 5th component




vue.js
Vue.component('step1', {
template: '#step1',
props: [
'currentStep',
'step1'
]
});

Vue.component('step2', {
template: '#step2',
props: [
'currentStep',
'step2'
]
});

Vue.component('step3', {
template: '#step3',
props: [
'currentStep',
'step3'
]
});

var app = new Vue({
el: '#app',
data: {
currentStep: 1,
step1: {
step1_category: '',
},
step2: {

},
step3: {
}
},
// By using this delimiters we were able to fix the vue.js compatibility with django. since the curly braces between django and
// vue.js conflicted, delimiters helped here to solve the conflicts
delimiters: ["<%","%>"],
ready: function() {
console.log('ready');
},
// Here we have written vue.js methods for increment and decrement of next and previous steps
methods: {
goToStep: function(step) {
this.currentStep ++;
},
stepsback: function(step) {
this.currentStep --;
},

//here if i will enter a "Real Estate | Single Family Homes" then i want to display 3rd component that means if a select the above category then if i will click on next then third component should display
onChange(event) {
var category = event.target.value
if (category == "Real Estate | Single Family Homes"){
this.step3
console.log(a)

}
},

Top comments (0)