Vue3 "conditional" rendering with <select> changed

Question

I am pretty new to the wonderful world of Vue3(or Vue), and I encountered a problem with "conditional" rendering with select changed. What I want to achieve is "different value of select will show different div for argument setting". However, my code do nothing when I changed the value of select, can anybody give me a hint? The following is my .vue file code:

  <div class="">

    <div class="">
      <p>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>

Nikola Pavicevic · Accepted Answer · 2022-02-18 07:50:22Z

1

Try like following snippet:

const { ref } = Vue
const app = Vue.createApp({
  setup() {
    let integration_type = ref("")
    let display1 = ref("display:none;")
    let display2 = ref("display:none;")

    const onchange = function(){
      if (integration_type.value == "1+2"){
        display1.value = "display:inline;"
        display2.value = "display:none;"
      } else {
        display1.value = "display:none;"
        display2.value = "display:inline;"
      }
    }

    const onclick = function(){

    }
    
    return {
      display1, display2, integration_type, onchange
    }
  }
})
app.mount('#demo')

<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>
<div id="demo" class="">

    <div class="">
      <p>Data integration type: 
        <select name="" id="" @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="" :style="display1">
      <p>Arguments for 1+2: 
        <input type="text">
      </p>
      <br>
      <button @click="onclick">start integration</button>
    </div>

    <div class="" :style="display2">
          <p>Arguments for 1+1:
        <input type="text">
      </p>
      <br>
      <button @click="onclick">start integration</button>
    </div>

  </div>
</div>

answered Feb 18, 2022 at 7:50

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wei WeiDeng Over a year ago

Thanks. The code works in Composition API, and what should it look like in Script setup?

Collectives™ on Stack Overflow

Vue3 "conditional" rendering with <select> changed

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related