How to disable button conditionally in Vuejs


We have seen some of the basic operations in vuejs . Now move on to advanced area. In the following example we will learn how conditionally disable command button.

When the user enter wrong input, we have to disable some submission button. ( for simplicity I skipped some portion of the template)

    <template>
.........
<button
:disabled="getTweetQuota < 0 || !newTweetContent"        
</button>
</template>

We can use the disabled property to disable it conditionally. We used two statements here , combined by or ( ||) statement which is optional.

Note that the : turned the disabled attribute of the button into a vue property. This method is applicable to any HTML attribute.

The following vue post posts may help you

How to render component conditionally in Vuejs


We have seen some of the basic operations in vuejs . Now move on to advanced area. In the following example we will learn how to conditionally render a component.

Script

<script>
import Tweet from "./Tweet.vue";
export default {
  components: { Tweet },
  name: "UserProfile",
  created() {},
  data() {
    return {
      
      followers: 0,
      user: {
        tweets: [
          { id: 907, content: "new features in vue3" },
          { id: 910, content: "new features in vue2" },
        ],
        id: 90,
        uname: "codehat",
        fullName: "manoj nair",
        isAdmin: true,
      }, 
    };
  },
  props: {},
  methods: {
    
  },
  watch: {},
  computed: {
    getTweetCharacterCount() {
      return this.newTweetContent.length;
    },
    getTweetQuota() {
      return this.tweetMaxLength - this.newTweetContent.length;
    },    
  },
};
</script>


We had a special admin badge with special style attached to it and also have a property (isAdmin) which is declared in the data section as follows

Template and Style

    <template>
.........
 <div class="user-profile__admin-badge" 
v-if="user.isAdmin">Admin</div>
</template>

<style scoped>

.user-profile__admin-badge {
  background: rebeccapurple;
  color: white;
  border-radius: 5px;
  margin-right: auto;
  padding: 0 10px;
  font-weight: bold;
}
</style>

The badge meant to be visible only if the isAdmin property of data() is set to true. This can be accomplished using the v-if directive to evaluate the value of the property inside the component.

The following vue post posts may help you

How to display list of items in Vuejs


An ideal vue component may consist of three sections as in angular, template, Script and Style.

In the following example we will learn how to deal lists in Vuejs template.

   <Div v-for="(color, index) in colorList"
                  :key="index"
                >
                  {{ color}}
                </Div>

In the above code we had a list which contain a list of colors and wand to render the item in a div. We can use the v-for directive to process the list which is similar to for loop in other programming languages.

As a list it is common to use index to locate the element in the list. Then we can use the interpolation statement ( {{ }}) to display the value.

The following vue post posts may help you

How to bind style class in Vuejs


An ideal vue component may consist of three sections as in angular, template, Script, Style. We can bind styles according to some rules ( truthiness).

In the following example we place two different colors for text area border.


<style scoped>
.text-safe {
  border-color: green;
  color: black;
}

.text-not-safe {
  border-color: crimson;
  color: black;
}
</style>

In the textarea we conditionally render the style as follows

 <textarea
            :class="{
              'text-safe': getTweetQuota > 50
            }"
            placeholder="tweet text here"
            id="newTweet"
            rows="7"
            v-model="newTweetContent"
          />

Here the style text-safe is only enabled when the getTweetQuota value is greater than 50 otherwise the style class is get removed. We can also bind multiple style to a component as follows

 <textarea
            :class="{
              'text-safe': getTweetQuota > 50,
              'text-not-safe': getTweetQuota < 50,
            }"
            placeholder="tweet text here"
            id="newTweet"
            rows="7"
            v-model="newTweetContent"
          />

Todo:

Try to add different color to a button based on values in a Text input

The following vue post posts may help you

How to setup Vuejs


Vuejs is a super fast, performant JavaScript frame work for building application ( web and cross platform). It enable developers quickly develop apps with ease and peace. If you are familiar with Angularjs , the learning curve will be much faster.

How to get started ?

To start using Vuejs we need to install the Vue-cli

npm install -g @vue/cli @vue/cli-service-global
# or
yarn global add @vue/cli @vue/cli-service-global

New Project

To create a project we can utilize the UI method which open in the browser as localhost or a command line way.

vue create <project-name>

The above command will create a vue project. We can also achieve the same with UI method

vue ui

It will open the project page and can configure, manage dependencies, run and other features without using the CLI directly.

Run the project

Using the serve method can run the project from console or use the UI

vue serve -o 

You need not start the program every time it watch for changes and can use Ctrl+C to stop the server.