Trung tâm cá nhân
sách gpt4 ai đã đi

jquery - 遇到 VueJS 类绑定(bind)问题，使用 vuejs v2.0+ Bootstrap v3.3.7

In lại 作者：搜寻专家 更新时间：2023-10-30 22:45:08 28 4
mua khóa gpt4 Nike

好吧，我遇到了一个问题，虽然是一个奇怪的问题，但我到处都找不到答案。

我们被指派用 Vue.js 创建一个购物车，我已经完成了我自己开始了这个项目，想看看我能用 vuejs 做什么。问题出现在页面加载后，访问“管理”面板，我创建了一个警报管理器，以使用 Bootstrap 即时创建警报，稍后我会在此处发布代码。问题是我想要复选框值并使用该选择来输入正确的警报类别，即“警报警报成功”。

我正在使用 Bind，奇怪的是，类在某种程度上起作用，只有警告危险并且始终如此。我不知道为什么或我做错了什么，需要一双新的眼睛，也许我们可以让它发挥作用。下面是我修改后的代码，根据正在中断的代码创建了一个单独的 html/vuejs 页面......对象正在成功创建，问题出在页面输出的某个地方......代码会运行，但你会可能需要将实时 vue 副本链接到它，因为代码太多无法上传，CDN 2.0.3 或更高版本应该可以工作。

//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}
      }khác{
        this.alertadd=true
      }
    }
  }
});


<đầu>
  Test App
   
  
  
   
  


  

    

      
      

        

          
          
WARNING!  You are logged into ADMIN mode, remember to logout

          

            

            

              

                

                  
                

                

                  

                    Alert Content:
                    

                    

                    Alert Options (Only select ONE option below!):

                     Sucess Formatting  
                     Info Formatting  
                     Warn Formatting  
                     Danger Formating


                    Alert Optional Options:

                     Dismissable  
                     Animate 


                    
                  


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

                  
Alerts and Message Administration:

                  

                    

  •                       
                          {{alerts[index].alertTitle}}  
                          {{alerts[index].alertMsg}}  

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

                          Animate:{{alerts[index].alerttypeAnimate}}
                          Dismiss:{{alerts[index].alerttypeDismiss}}
                        


    •                   

                    

                  

                

                

              

              
              
              
              

                

                                :class="{
                                          'alert-sucess':alerts[index].alerttypeSuccess,
                                          'alert-info':alerts[index].alerttypeInfo,
                                          'alert-warning':alerts[index].alerttypeWarn,
                                          'alert-danger':alerts[index].alerttypeDanger
                                        }">
                                        {{alerts[index].alertTitle}}    {{alerts[index].alertMsg}}

    我一直在用上面的代码进行调试，它似乎停止围绕 DIV id“everyonemessages”工作。生成时，代码应该呈现引导消息警报，其中从复选框中选择类并绑定(bind)到静态警报类。但是在 html 上打印的所有内容都是纯文本......我一直在尽我所能尝试让它工作但不知所措......我会稍微编辑更多，但我认为现在这很好:

    感谢您的帖子，杰西·F

    1 Câu trả lời

    看起来您正在尝试使用对象语法来绑定(bind)类 ( link to docs here )。特别是，文档状态:

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


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

    请注意，字符串 "false" 与 bool 值 SAI 不同。字符串 "false" 为真，将计算为真。

    因此，我的猜测是您需要从 :class 代码中删除 toString():


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

    另外，请注意您为成功警报的类编写了 alert-sucess。它应该是 alert-success(两个 c)。

    关于jquery - 遇到 VueJS 类绑定(bind)问题，使用 vuejs v2.0+ Bootstrap v3.3.7，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40921100/

    28 4 0
    Bài viết được đề xuất: javascript - Laravel 5.3、Vue.js 2+ 无法使列表呈现 (v-for) 正常工作
    Bài viết được đề xuất: javascript - 没有提供给模块导出的上下文
    Bài viết được đề xuất: ajax - Vue.js:如何传入不是父/访问 vue 方法的数据？
    Bài viết được đề xuất: javascript - 无法调试随机取消选中的单选按钮
    搜寻专家
    Hồ sơ cá nhân

    Tôi là một lập trình viên xuất sắc, rất giỏi!

    Nhận phiếu giảm giá Didi Taxi miễn phí
    Mã giảm giá Didi Taxi
    Các bài viết nóng hổi trên toàn bộ trang web
    Giấy chứng nhận ICP Bắc Kinh số 000000
    Hợp tác quảng cáo: 1813099741@qq.com 6ren.com