How can I make it in vue.js, if Option A is selected div b disable, and when Option B is selected div A is disable using Vue.js.

<div id="app">

    <select>

        <option>A</option>

        <option>B</option>

    </select>

    <div id="a">

            A

    </div>

    <div id="b">

            B

    </div>

How can I make it in vue.js, if Option A is selected div b disable, and when Option B is selected div A is disable using Vue.js.

<div id="app">

    <select>

        <option>A</option>

        <option>B</option>

    </select>

    <div id="a">

            A

    </div>

    <div id="b">

            B

    </div>

• javascript
• vue.js
• vuejs2

Share Improve this question Follow edited Jul 27, 2018 at 0:57 Mathew Magante asked Jun 19, 2017 at 7:28 Mathew MaganteMathew Magante 1,40555 gold badges2121 silver badges2828 bronze badges 1

• 1 It doesn't make sense to disable a div. The disabled attribute is only relevant for input-like elements. See the full list: w3schools./tags/att_disabled.asp – FitzFish Commented Jun 19, 2017 at 7:34

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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./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>

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