CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap-3vue.jsvuejs2
Jesse Fender
Jesse Fender

Reputation: 319

having an issue with a VueJS class binding issue, using vuejs v2.0+ Bootstrap v3.3.7

Okay, I am having an issue, albeit a strange one, I have been all over and cannot seem to find the answer.

We were assigned to create a shopping cart with Vue.js, which I have completed I started this project on my own and wanted to see what i could do with vuejs. The issue comes after the page loads, accessing a "admin" panel, I have created a alert manager, to create alerts on the fly using bootstrap, ill post the code here in a moment. The issue is that I wanted to have checkbox values and to use that selection to input the correct class of alert, ie, "alert alert-success".

I am using Bind, The weird thing is, that the classes sort of work, only the alert-danger and is always. I don't know why or what I am doing wrong, and need a fresh pair of eyes and maybe we can get it to work. Below is my modified code created a seperate html/vuejs pages based on the code that is breaking... The object is being created successfully, the issue lies somewhere in the output to the page... the code will wrun, but you will probably need to link a live vue copy to it since the code was too much to upload, CDN 2.0.3 or greater should work.

//I have the VueJS file downloaded, and in the root folder... but dont want to upload this file to teh site due to the shear size. I am useing VueJS v2.1.2 i think, but it is definitly between 2.0.3 and 2.1.2

//this is the code only pertaining to the part that is breaking...

myAPP = new Vue({
  el: '#testapp',
  data:{
    alerts: [],
    newAlertObj: {
                  alertTitle:'',
                  alertMsg:'',
                  alerttypeSuccess:false,
                  alerttypeInfo:false,
                  alerttypeWarn:false,
                  alerttypeDanger:false,
                  alerttypeDismiss:false,
                  alerttypeAnimate:false
                  },
    alertadd:false,
    //radio options for alert add [[No longer used as the object is being created as far as i can tell correctly]]// 
    /*
    isSuccess:false,
    isInfo:false,
    isWarn:false,
    isDanger:false,
    //for check boxes//
    isAnimated:false,
    isDismissable:false*/
  },
  methods:{
    addAlertObj:function (){
      console.log(this.alerts.push(this.newAlertObj))
      //debug
      console.log(this.newAlertObj.alerttypeSuccess)
      console.log(this.newAlertObj.alerttypeInfo)
      console.log(this.newAlertObj.alerttypeWarn)
      console.log(this.newAlertObj.alerttypeDanger)
      console.log(this.newAlertObj.alerttypeDismiss)
      console.log(this.newAlertObj.alerttypeAnimate)

      this.newAlertObj={alertTitle:'',alertMsg:'',alerttypeSuccess:false,alerttypeInfo:false,alerttypeWarn:false,alerttypeDanger:false,alerttypeDismiss:false,alerttypeAnimate:false}
    },
    togglealertadder: function (){
      if (this.alertadd){
        this.alertadd=false
        this.newAlertObj={alertTitle:'',alertMsg:'',alerttypeSuccess:false,alerttypeInfo:false,alerttypeWarn:false,alerttypeDanger:false,alerttypeDismiss:false,alerttypeAnimate:false}
      }else{
        this.alertadd=true
      }
    }
  }
});
<! DOCTYPE html>
<html lang="en" charset="utf-8">
<head>
  <title>Test App</title>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <!--jquery cdn-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="style.css"> <!--site deffinitions and styles-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
</head>
<body>
  <div class="container">
    <div class="container-fluid">
      <!-- test of the alert creation elements only goes here -->
      <div id="testapp">
        <div id="AlertsNMessages">
          <!-- Log in state only messages -->
          <p class="alert alert-warning"><span style="font-weight:bold;">WARNING! </span> You are logged into ADMIN mode, remember to logout</p>
          <div class = "row">
            <div class="col-sm-2"></div>
            <div class="col-sm-8">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <button type="button" class="btn btn-primary btn-block" @click="togglealertadder">Manage Alerts</button>
                </div>
                <div class="panel-body" v-if="alertadd">
                  <div class="form-group">
                    Alert Content:
                    <input class="form-control" placeholder="Alert Title" v-model="newAlertObj.alertTitle" /><br />
                    <input class="form-control" placeholder="Alert Text" v-model="newAlertObj.alertMsg" /><br />
                    Alert Options (Only select ONE option below!):<br />
                    <input type="checkbox" name="alerttype" v-model="newAlertObj.alerttypeSuccess"/> Sucess Formatting &nbsp;
                    <input type="checkbox" name="alerttype1" v-model="newAlertObj.alerttypeInfo" /> Info Formatting &nbsp;
                    <input type="checkbox" name="alerttype2" v-model="newAlertObj.alerttypeWarn" /> Warn Formatting &nbsp;
                    <input type="checkbox" name="alerttype3" v-model="newAlertObj.alerttypeDanger" /> Danger Formating<br /><br />
                    Alert Optional Options:<br />
                    <input type="checkbox" class="" v-model="newAlertObj.alerttypeDismiss" /> Dismissable &nbsp;
                    <input type="checkbox" class="" v-model="newAlertObj.alerttypeAnimate" /> Animate <br /><br />
                    <button type="button" class="btn btn-primary" @click="addAlertObj">Create Alert</button>
                  </div>

                  {{newAlertObj.alerttypeSuccess}}
                  {{newAlertObj.alerttypeInfo}}
                  {{newAlertObj.alerttypeWarn}}
                  {{newAlertObj.alerttypeDanger}}

                  <h4>Alerts and Message Administration:</h4>
                  <div id="testing" v-for="(item,index) in alerts">
                    <li style="list-style-type:none;">
                      <button type="button" class="btn btn-danger" @click="alerts.splice(index,1)">&times;</button>
                      {{alerts[index].alertTitle}}  &nbsp;
                      {{alerts[index].alertMsg}} &nbsp;

                      Success:{{alerts[index].alerttypeSuccess}}
                      Info:{{alerts[index].alerttypeInfo}}
                      Warn:{{alerts[index].alerttypeWarn}}
                      Danger:{{alerts[index].alerttypeDanger}}&nbsp;

                      Animate:{{alerts[index].alerttypeAnimate}}
                      Dismiss:{{alerts[index].alerttypeDismiss}}
                    </li><br />
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-2"></div>
          </div>
          <!-- everybody messages -->
          <!-- It is here that the opbject gets translated to the page based on the opbject values.-->
          <!-- alert is a static class, the :class are the dynamic whih just format the alert apearence... but it shows only text. -->
          <div id="everybodymessages" v-for="(item,index) in alerts">
            <p class="alert"
                            :class="{
                                      'alert-sucess':alerts[index].alerttypeSuccess,
                                      'alert-info':alerts[index].alerttypeInfo,
                                      'alert-warning':alerts[index].alerttypeWarn,
                                      'alert-danger':alerts[index].alerttypeDanger
                                    }">
                                    {{alerts[index].alertTitle}} &nbsp; &nbsp;{{alerts[index].alertMsg}}</p>
          </div>
        </div>

      </div>
    </div>
  </div>
  <script src="testapp.js"></script>
</body>
</html>

I have been doing debug with the above code, and it seems to stop working around the DIV id "everyonemessages". When generated the code is supposed to render a bootstrap message alert with teh classes being selected from checkboxes and bound to the static alert class.. but all that prints out on the html is plain text... I have been trying everything i can to try to get it to work and am at a loss... I will edit more in a little bit, but I think thats good for now:

Thanks for posts, Jesse F

Upvotes: 2

Views: 1270

Answers (1)

asemahle
asemahle

Reputation: 20805

It looks like you're trying to use the use the object syntax for binding classes (link to docs here). In particular, the docs state:

We can pass an object to v-bind:class to dynamically toggle classes:

<div v-bind:class="{ active: isActive }"></div>

The above syntax means the presence of the active class will be determined by the truthiness of the data property isActive.

Note that the string "false" is not the same as the boolean value false. The string "false" is truthy, and will evaluate to true.

So, my guess is that you need to remove the toString() from your :class code:

<p class="alert" 
   :class="{ 
     'alert-success':alerts[index].alerttypeSuccess, 
     'alert-info':alerts[index].alerttypeInfo, 
     'alert-warning':alerts[index].alerttypeWarn,
     'alert-danger':alerts[index].alerttypeDanger }">

Also, note that you wrote alert-sucess for the class of the success alert. It should be alert-success (two c's).

Upvotes: 2

Related Questions