账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    Vue 数据监听问题
    • 2020-01-01 00:00
    • 10
    22
    0
    <template>
      <div>
        <p>{{msg}}</p>
        <div v-for="(item, index) in list">
          <p>{{item.name}} - {{item.age}}</p>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      props: ["[list"],
      data() {
        return {
          msg: ""
        };
      },
      methods: {},
      watch: {
        // 这里需要怎么写 比较好
        // ....
      }
    };
    </script>
    

    list 是外面传进来,每隔5秒, list会发生变化(传进来的list 会隔5秒发生变化),
    第一次传进来的list: [{name: "小明", age: 15, status: 2}, {name: "小红", age: 14, status: 1},{name: "小花", age: 13, status: 1},]
    隔了几秒后,第二次传进来的list: [{name: "小明", age: 15, status: 2}, {name: "小红", age: 14, status: 2},{name: "小花", age: 13, status: 1},]
    再隔了几秒后,第三次传进来的list: [{name: "小明", age: 15, status: 2}, {name: "小红", age: 14, status: 2},{name: "小花", age: 13, status: 2},]

    如何比较好写法 去监听list的变化, 当数组中每个数据的status都为 2 的时候, 将 msg 赋值为 “数据更新完成”, 反之,list中的有任意一条数据的status 不等于2 时, 就让 msg 赋值为 “数据正在更新” 呢。。。
    求解惑....

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • {鸢゜} 普通会员 1楼

      Vue 中的数据监听问题通常包括:

      1. 数据绑定问题:当你在 Vue 组件中使用 v-on 注解绑定事件时,需要确保事件类型与组件实例的属性类型匹配。如果属性类型不匹配,Vue 会抛出一个错误。

      ```html

      ```

      1. 生命周期方法中的事件监听:在 Vue 组件的生命周期方法中,可以通过 this.$emit 触发事件并接收数据。

      ```html

      ```

      1. 使用了多个监听器时的问题:如果在 Vue 组件中使用了多个监听器,确保它们的优先级正确。Vue 会优先处理注册在 $beforeCreate$beforeMount$beforeUpdate$beforeDestroy 中的监听器。

      2. 通过 $emit 触发事件:在 Vue 组件的生命周期方法中,可以使用 $emit 触发事件并接收数据。确保在 handleClick 方法中正确接收和处理事件数据。

      ```html

      ```

      总之,当处理 Vue 组件的数据监听时,需要确保事件类型匹配、正确触发事件、正确接收和处理数据。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部