vue.js - How to enable disable component in vuejs -


i'm developing small application in vuejs i'm having div element , trying show element if data value 1 , hide if data value 0, i'm having v-model withclient this:

<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>

and element needs hidden:

<div class="col-sm-6">     <label class="col-sm-3 control-label">clients:</label>     <div class="col-sm-8" v-if="withclientselection">         <v-select                 multiple                 :options="contactclients"                 :on-search="getoptions"                 placeholder="client name"                 v-model="clientparticipants">         </v-select>     </div> </div>

i've computed property withclientselection:

withclientselection() {     if(this.withclient === 0)     {         this.clientparticipants = ''         return false     }     else     {         return true     } }

but somehow i'm not able this. me on this. thanks

it's simple, should use 

this.withclient === '0'

instead of 

this.withclient === 0

i overlooked part , verified code myself first, here's working example 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>


Comments

Post a Comment

Popular posts from this blog

python Tkinter Capturing keyboard events save as one single string -

is possible store keyboard events 1 string? code below stores 1 char , prints it. card reader or bar code reader, contains collection of character/ string not 1 character @ time. goal save char pressed text variable. from tkinter import * root = tk() def key(event): text= event.char text+= event.char print ("pressed", text) def callback(event): frame.focus_set() print ("clicked at", event.x, event.y) frame = frame(root, width=100, height=100) frame.bind("<key>", key) frame.bind("<button-1>", callback) frame.pack() root.mainloop() currently, creating text variable , everytime key() function gets called, , text stores last character typed. you can define text module level variable , , use module level text inside key function - text = '' def key(event): global text text+= event.char print("pressed", text)
Read more

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m
Read more

javascript - Z-index in d3.js -

i have map , when hover effect on region of map below yellow line , circle, last ones disappear. how can solve problem? http://jsfiddle.net/ot21n9qx/ var arc = g.append("path") .style("fill", "none") .style("stroke", "yellow") .style("stroke-width", 2) .attr("d", "m" + pathorigin[0] + "," + pathorigin[1] + " q" + svgpoint[0] + "," + pathorigin[1] + " " + svgpoint[0] + "," + svgpoint[1]); var circlesize = d3.scale.linear() .domain([0, 0.5, 1]) .range([4, 10, 4]); svg not have z order draws objects in order created. need create path , circle after create highlight regions. here forked fiddle: http://jsfiddle.net/o00fzgaf/1/
Read more