I'm just starting to explore the exciting world of Vue3 (or Vue) and I've run into a challenge with conditional rendering based on select input changes. My goal is to display different div elements for argument setting based on the selected value in the dropdown. However, my code doesn't seem to be working when I change the select value. Can anyone offer me some guidance? Here's an excerpt from my .vue file:
<div class="">
<div class="">
<p>Choose data integration type:
<select name="" id="" v-on:change="onchange" v-model="integration_type">
<option value="">--Please choose one--</option>
<option value="1+2">1+2</option>
<option value="1+1">1+1</option>
</select>
</p>
</div>
<div class="" v-bind:style="display1">
<p>Arguments for 1+2:
<input type="text">
</p>
<br>
<button v-on:click="onclick">start integration</button>
</div>
<div class="" v-bind:style="display2">
<p>Arguments for 1+1:
<input type="text">
</p>
<br>
<button v-on:click="onclick">start integration</button>
</div>
</div>
</template>
<script setup lang="ts">
let integration_type = ""
let display1 = "display:none;"
let display2 = "display:none;"
const onchange = function(){
if(integration_type == "1+2"){
display1 = "display:inline;"
display2 = "display:none;"
}else{
display1 = "display:none;"
display2 = "display:inline;"
}
}
const onclick = function(){
}
</script>
<style scoped>
</style>