VueJs Disable/Enable Div when selected

Question

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>

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

tony19 · Accepted Answer · 2022-07-15 23:04:11Z

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>

edited Jul 15, 2022 at 23:04

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 19, 2017 at 11:10

Ali

1,3934 gold badges21 silver badges32 bronze badges

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

3 Comments

Bert Over a year ago

This is not utilizing vue very much.

Ali Over a year ago

@BertEvans Yes you're right. I changed my code. He can use v-if and v-else. I think, Vue not just a template. So, if we need some JS code, we can use even if it is very simple.

Ali Over a year ago

@MathewMagante if this codes ok, you can mark as solved.

Marek Urbanowicz · Accepted Answer · 2017-06-19 07:52:10Z

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

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

v-show - div will be hidden/shown

On your divs: <div id='a' v-show="selected=== 'a'"

answered Jun 19, 2017 at 7:52

Marek Urbanowicz

13.8k19 gold badges68 silver badges93 bronze badges

2 Comments

Marek Urbanowicz Over a year ago

SO is not free coding service. You should try to do that by yourself. It is really simple job. You will learn much more doing it by yourself. I gave you solution for your question. vuejs.org/v2/guide/index.html

Ru Chern Chong Over a year ago

@MathewMagante Read the Vuejs guide and you will understand after awhile. It's better to write the code yourself than spoonfed. It's for your own good too!

Collectives™ on Stack Overflow

VueJs Disable/Enable Div when selected

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related