2

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

Improve this question
3
  • I'm not sure I understand the problem... All the alerts work except for success. Success doesn't work because you gave it the class alert-sucess, but it should be alert-success (two 'c's in success) Commented Dec 3, 2016 at 16:29
  • I'm an idiot... - I cannot believe that I didn't catch this... Thank you... I marked answered... Its working and I really couldn't have done it with ouy you Commented Dec 3, 2016 at 17:06
  • No problem :D Glad to have helped Commented Dec 4, 2016 at 16:25

1 Answer 1

Reset to default
2

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).

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

5 Comments

Ok Ill try that - Like i said I have been trying everything and somewhere it had said that it wouldn't render with out the toString() But the funny thing, when that is dropped it wasn't working... which was why i had tried it ... Let me try it and i will post the results here :) Thank you for your reply
I tried the code like you had shown, and now it shows: Well this mini editor wont allow you to post images (I screenshot the page results.... ) OK this is the test string results using the checkbox for success: "Success! Test test test Success:true Info:false Warn:false Danger:false Animate:false Dismiss:false" Showing the the object is being created .. but the alert is not being shown. no errors in console, and the text is being sent and display where the alert should be... :\
It's difficult to troubleshoot your problem without an MCVE. Try to provide a MCVE (stackoverflow.com/help/mcve) that causes your error, and it'll be much easier for others to help :)
Ok I have done what i could to generate the code with only the parts needed to completely reproduce the issue... Ill post it in an answer to my post to make it more clear... or edit my original post... I have cut as much of the code as I could, I left some of the debugging binding that i used to show that I am getting the object created correctly, or so it appears, It seems to be breaking when the coke v-for is run to iterate through the items in the object and create them on the html page.
I have been pouring over this code for a week, and couldn't understand why it wasn't working... I am grateful for your help, and I am so sorry I was a bother... I really should have seen it and i didn't... For those following along, I misspelled a class, and that was the reason for the code failure... Thank you guys... its working and going just fine now... I feel totally stupid...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.