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)