[Vuejs]-VueJs Disable/Enable Div when selected

by

2👍

✅

Firstly, you should search Vue’s Methods.

Updated: 19/06/2017 – 16:35

And if you want to code sample you can use this to example:

var app = new Vue({
    el: '#app',
    data: {
        selected: ''
    },
})
#a {
    width: 128px;
    height: 128px;
    background-color: gray;
}

#b {
    width: 128px;
    height: 128px;
    background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
    <select v-model="selected">
        <option disabled value="">Select div name</option>
        <option value="a">A</option>
        <option value="b">B</option>
    </select>
    <div id="a" v-if="selected === 'a'">
      Div A
    </div>
    <div id="b" v-else>
      Div B
    </div>
</div>
👤Ali

0👍

If by disabling you mean to hide id or remove it from DOM – yes, you can do it with Vue.

Applies to both:
1. Assign the select to the model like v-model='selected'
2. Initiate it in the model: data() { return { selected: null; (...) } }

v-if – DIV will be removed/insterted from/into DOM

  1. On your divs: <div id='a' v-if="selected=== 'a'"

v-show – div will be hidden/shown

  1. On your divs: <div id='a' v-show="selected=== 'a'"
👤Marek Urbanowicz

Leave a comment