[Vuejs]-How to hide / show component in vuejs

by

0👍

✅

It’s actually very simple, you should use 

this.withClient === '0'

instead of 

this.withClient === 0

I also overlooked this part and verified your code myself first, here’s a fully working example that I used.

Vue.component('v-select', VueSelect.VueSelect);

const app = new Vue({
  el: '#app',
  data: {
    withClient: '0',
    clientParticipants: '',
    dummyData: ['Aaron', 'Bart', 'Charles', 'Dora', 'Edward', 'Flora', 'Gladys', 'Heidi', 'Iris', 'Jason'],
    contactClients: []
  },
  computed: {
    withClientSelection() {
      if (this.withClient === '0') {
        return false
      }
      return true
    }
  },
  watch: {
    withClient(newVal) {
      if (newVal === 0) {
        this.clientParticipants = '';
      }
    }
  },
  methods: {
    getOptions(search, loading) {
      /*
      loading(true)
      this.$http.get('https://api.github.com/search/repositories', {
         q: search
      }).then(resp => {
         this.contactClients = resp.data.items
         loading(false)
      })
      */
      this.contactClients = this.dummyData
        .filter((name) => name.toLowerCase().indexOf(search.toLowerCase()) >= 0);
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
<div id="app">
  <div class="col-sm-6">
    <label class="col-sm-6 control-label">With client*:</label>
    <div class="radio col-sm-3">
        <input type="radio" name="with_client" v-model="withClient" value="1" checked="">
        <label>
            Yes
        </label>
    </div>
    <div class="radio col-sm-3">
        <input type="radio" name="with_client" v-model="withClient" value="0">
        <label>
            No
        </label>
    </div>
  </div>
  <div class="col-sm-6">
    <label class="col-sm-3 control-label">Clients:</label>
    <div class="col-sm-8" v-if="withClientSelection === true">
        <v-select
                multiple
                :options="contactClients"
                :on-search="getOptions"
                placeholder="Client name"
                v-model="clientParticipants">
        </v-select>
    </div>
  </div>
  <div class="col-sm-6">
    <label class="col-sm-3 control-label">Selected Clients:</label>
    <div class="col-sm-8" v-if="withClientSelection === true">
      {{clientParticipants}}
    </div>
  </div>
</div>
👤kevguy

0👍

I think the intention with v-model on hidden inputs is to set up a one-way binding, in which case it’s much better to use
<input type="hidden" :value="someData" >

👤sachin

0👍

You can try this, it will help you to solve your problem.

new Vue({
  el: '#app',
  data: {
    clientParticipants: '',
    withClientSelection: 1
  },
  methods: {
    checkMe: function(type) {
    return this.withClientSelection = type
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
<div class="col-sm-6">
    <label class="col-sm-6 control-label">With client*:</label>
    <div class="radio col-sm-3">
        <input type="radio" name="with_client" @change="checkMe(1)" checked="">
        <label>
            Yes
        </label>
    </div>
    <div class="radio col-sm-3">
        <input type="radio" name="with_client" @change="checkMe(0)">
        <label>
            No
        </label>
    </div>
</div>
<div class="col-sm-6">
    <label class="col-sm-3 control-label">Clients:</label>
    <div class="col-sm-8" v-if="withClientSelection">
      Display now!
        <v-select
                multiple
                :options="contactClients"
                :on-search="getOptions"
                placeholder="Client name"
                v-model="clientParticipants">
        </v-select>
    </div>
</div>
</div>
👤Jrey

Leave a comment