CODEWITHSUNDEEP
javascriptvue.jsvue-component
HPatel
HPatel

Reputation: 5

How to nest v-show and v-if together in Vue.js?

For Example, the web app will follow the following steps:

• It reads a name from the user, and displays back a message.

• Check if the name entered is your name.

• If the name is your name, output the message 'Awesome name!'

• Otherwise output the ‘not my name’ message.

How this can be achieved with v-show and v-if in Vue.js?

Below is the sample code, Hence, How to use v-show, so that the v-if is only showed when condition is met? 

    <!-- Show if str is vue-->
    <p v-if="strName.toLowerCase() == 'henil'">Awesome Name!</p>
    <!-- else -->
    <p v-else>{{ strName }} is not my name!</p>
    </div>
    
    <!-- All Bootstrap plug-ins file -->
    <script src="js/bootstrap.bundle.min.js"></script>
    
    <!-- All VueJS -->
    <script src="js/vue.min.js"></script>
    
    <script type="text/javascript">
    //assigning variables
    var strName = '';
    //creating new Vue instance
    new Vue({
        el: '#app', //denotes where vue js app starts
        data:  {strName}//passing variables into vue app
    });

I am getting this output with above code

Upvotes: 0

Views: 737

Answers (1)

Pcloth
Pcloth

Reputation: 26

It looks like vue.js is not loaded on the dom, you must use a div with an id of app in your html

E.g：

<div id="app">
    <input v-model="strName">
    <p v-if="strName.toLowerCase() == 'henil'">Awesome Name!</p>
    <p v-else>{{ strName }} is not my name!</p>
</div>

OR

It may be that your code is not running on the web server, and you directly use the browser to open the local file, causing vue.js to not run.

Upvotes: 1

Related Questions