个人中心
gpt4 book ai didi

javascript - 如何修复带有复选框的 vue 更新？

转载 作者：行者123 更新时间：2023-12-03 00:01:14 25 4
gpt4 key购买 nike

我正在尝试创建一个带有复选框的 TreeView ，其中父级始终根据其子级处于正确的状态。包括不确定的值。 v-model 将其值放入数组中。这就是我到目前为止所得到的

问题是我设置了 B2 (叶节点)为选中状态，但随后我期望它的父节点并且它的父节点变得不确定。然而事实并非如此。我相信这是因为我使用 v-if (其中我有 v-if="data.expanded")而不是 v-show在树形 View 子级中，我将 B2 的父级折叠起来，因此它不显示。

但我不明白为什么这是一个问题，因为我只是对数据模型进行更改并在不依赖于实际 DOM 的虚拟 dom 中发出事件。有谁知道为什么吗？

谢谢

https://jsfiddle.net/s8tkLeqp/

html

<!DOCTYPE html>
<html>
    <head>
        <title>Title of the document</title>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.8/vue.min.js"></script>
    </head>
    <body>
        <template id="ddct-treeview-template">
            <dd-treeview-inner v-bind:data="data" v-bind:root="0" v-on:change="change"></dd-treeview-inner>
        </template>

        <template id="ddct-treeview-inner-template">
            <div :style="{'marginLeft':root>0 || data.collapsible ? '30px' : '0', 'marginBottom' : '4px'}">
                <span v-if="data.collapsible" @click="clickToggle" :class="['ddct_toggle', {'ddct_collapse_toggle' : !data.expanded}]"></span>
                <input type="checkbox" v-model="data.checked" v-indeterminate="data.indeterminate"> <span>{{data.name}}</span>
                <div :class="data.class" v-if="data.expanded">
                    <dd-treeview-inner v-for="child in data.children" v-bind:data="child" v-bind:root="root+1" v-on:change="propUp"></dd-treeview-inner>
                </div>
            </div>
        </template>

        <div id="app">
            <dd-treeview v-bind:data="data" v-model="treeVals"></dd-treeview>
            <div v-for="val in treeVals">{{val}}</div>
        </div>

    </body>
</html>

js

Vue.component('dd-treeview-inner', {
  template : $("#ddct-treeview-inner-template")[0],
  props: ['data', 'root'],
  data : function() {
    return {};
  },
  directives: {
    indeterminate: function(el, binding) {
      el.indeterminate = Boolean(binding.value);
    }
  },
  watch : {
    'data.checked' : function(new_val, old_val) {
      if (this.data.value) {
        this.updateTree(new_val);
      }
    }
  },
  methods : {
    clickToggle : function() {
      this.data.expanded = !this.data.expanded;
    },
    updateTree : function(state) {
      this.data.indeterminate = false;
      this.propDown(state);
      this.$emit('change');
    },
    propDown : function(state) {
      this.data.children.map(function(child) {
        child.checked = state;
        child.indeterminate = false;
        child.propDown(state);
      });
    },
    propUp : function() {
      var children = this.data.children;
      var checked = 0
      var indeterminate = 0;
      children.map(function(child) {
        if (child.checked && !child.indeterminate) checked++;
        if (child.indeterminate) indeterminate++;
      });
      if (indeterminate > 0) {
        this.data.checked = true;
        this.data.indeterminate = true;
      } else if (checked == 0) {
        this.data.checked = false;
        this.data.indeterminate = false;
      } else if (checked == children.length) {
        this.data.checked = true;
        this.data.indeterminate = false;
      } else {
        this.data.checked = true;
        this.data.indeterminate = true;
      }
      this.$emit('change');
    }
  }
});

Vue.component('dd-treeview', {
  template : $("#ddct-treeview-template")[0],
  props: ['value', 'data'],
  watch : {
    value : function(new_val, old_val) {
      this.setValues(new_val);
    }
  },
  data : function() {
    return {};
  },
  mounted : function() {
    this.setValues(this.value);
  },
  methods : {
    setValues : function(values) {
      values = values.map(x => x.toLowerCase());
      function ff(node) {
        if (node.value) {
          node.checked = values.indexOf(node.value.toLowerCase()) != -1;
          node.indeterminate = false;
        }
        node.children.map(ff);
      }
      ff(this.data); 
    },
    change : function() {
      var arr = [];
      function ff(node) {
        if (node.value && node.checked && !node.indeterminate) {
          arr.push(node.value);
        }
        node.children.map(ff);
      }
      ff(this.data);
      this.$emit('input', arr);
    }
  }
});

new Vue({
  el: $("#app")[0],
  data : {
    treeVals : ["B2"],
    data : {
      name : "ROOT",
      collapsible : true,
      expanded : true,
      checked:false,
      indeterminate:false,
      children : [
        {
          name : "A",
          collapsible : true,
          expanded : false,
          checked:false,
          indeterminate:false,
          children : [
            {
              name : "A1",
              children : [],
              checked:false,
              indeterminate:false,
              value : "A1"
            },
            {
              name : "A2",
              children : [],
              checked:false,
              indeterminate:false,
              value : "A2"
            }
          ]
        },
        {
          name : "B",
          collapsible : true,
          expanded : false,
          checked:false,
          indeterminate:false,
          children : [
            {
              name : "B1",
              children : [],
              checked:false,
              indeterminate:false,
              value : "B1"
            },
            {
              name : "B2",
              children : [],
              checked:false,
              indeterminate:false,
              value : "B2"
            }
          ]
        }
      ]
    }
  }
});

CSS

.ddct_toggle {
  position: relative;
}

.ddct_toggle::before {
  content: '+';
  display: block;
  position: absolute;
  top: 0;
  left: -30px;
  border: 1px solid red;
  border-radius: 50%;
  width: 24px;
  text-align: center;
  transition: all 0.4s;
  cursor: pointer;
}

.ddct_toggle.ddct_collapse_toggle::before {
  content: '-';
}

最佳答案

我猜这是因为您触发的 updateTree 方法需要安装的组件。所以目前没有任何东西真正监视 B2 已检查的属性。因此没有任何东西触发。

您可以做的一件事是至少在切换时触发:

watch : {
 'data.checked' :{
      handler: function(new_val, old_val) {
      if (this.data.value) {
        this.updateTree(new_val);
      }
    },
    immediate: true // this is equal to call of handler in mounted
  }
},

另一件事是只加载空组件:

Vue.component('dd-treeview-inner', {
  template: $("#ddct-treeview-inner-template")[0],
  props: ['data', 'root', 'expanded'], // pass data.expanded
  data: function() {
    return {};
  },
  directives: {
    indeterminate: function(el, binding) {
      el.indeterminate = Boolean(binding.value);
    }
  },
  watch: {
    'data.checked': {
      handler: function(new_val, old_val) {
        if (this.data.value) {
          this.updateTree(new_val);
        }
      },
      /* immediate: true */
    }
  },
  methods: {
    clickToggle: function() {
      this.data.expanded = !this.data.expanded;
    },
    updateTree: function(state) {
      this.data.indeterminate = false;
      this.propDown(state);
      this.$emit('change');
    },
    propDown: function(state) {
      this.data.children.map(function(child) {
        child.checked = state;
        child.indeterminate = false;
        child.propDown(state);
      });
    },
    propUp: function() {
      var children = this.data.children;
      var checked = 0
      var indeterminate = 0;
      children.map(function(child) {
        if (child.checked && !child.indeterminate) checked++;
        if (child.indeterminate) indeterminate++;
      });
      if (indeterminate > 0) {
        this.data.checked = true;
        this.data.indeterminate = true;
      } else if (checked == 0) {
        this.data.checked = false;
        this.data.indeterminate = false;
      } else if (checked == children.length) {
        this.data.checked = true;
        this.data.indeterminate = false;
      } else {
        this.data.checked = true;
        this.data.indeterminate = true;
      }
      this.$emit('change');
    }
  }
});

Vue.component('dd-treeview', {
  template: $("#ddct-treeview-template")[0],
  props: ['value', 'data'],
  watch: {
    value: function(new_val, old_val) {
      this.setValues(new_val);
    }
  },
  data: function() {
    return {};
  },
  mounted: function() {
    this.setValues(this.value);
  },
  methods: {
    setValues: function(values) {
      values = values.map(x => x.toLowerCase());

      function ff(node) {
        if (node.value) {
          node.checked = values.indexOf(node.value.toLowerCase()) != -1;
          node.indeterminate = false;
        }
        node.children.map(ff);
      }
      ff(this.data);
    },
    change: function() {
      var arr = [];

      function ff(node) {
        if (node.value && node.checked && !node.indeterminate) {
          arr.push(node.value);
        }
        node.children.map(ff);
      }
      ff(this.data);
      this.$emit('input', arr);
    }
  }
});

new Vue({
  el: $("#app")[0],
  data: {
    treeVals: ["B2"],
    data: {
      name: "ROOT",
      collapsible: true,
      expanded: true,
      checked: false,
      indeterminate: false,
      children: [{
          name: "A",
          collapsible: true,
          expanded: false,
          checked: false,
          indeterminate: false,
          children: [{
              name: "A1",
              children: [],
              checked: false,
              indeterminate: false,
              value: "A1"
            },
            {
              name: "A2",
              children: [],
              checked: false,
              indeterminate: false,
              value: "A2"
            }
          ]
        },
        {
          name: "B",
          collapsible: true,
          expanded: false,
          checked: false,
          indeterminate: false,
          children: [{
              name: "B1",
              children: [],
              checked: false,
              indeterminate: false,
              value: "B1"
            },
            {
              name: "B2",
              children: [],
              checked: false,
              indeterminate: false,
              value: "B2"
            }
          ]
        }
      ]
    }
  }
});
.ddct_toggle {
  position: relative;
}

.ddct_toggle::before {
  content: '+';
  display: block;
  position: absolute;
  top: 0;
  left: -30px;
  border: 1px solid red;
  border-radius: 50%;
  width: 24px;
  text-align: center;
  transition: all 0.4s;
  cursor: pointer;
}

.ddct_toggle.ddct_collapse_toggle::before {
  content: '-';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Title of the document</title>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

</head>

<body>
  <template id="ddct-treeview-template">
            <dd-treeview-inner :expanded="true" v-bind:data="data" v-bind:root="0" v-on:change="change"></dd-treeview-inner>
        </template>

  <template id="ddct-treeview-inner-template">
            <div v-if="expanded" :style="{'marginLeft':root>0 || data.collapsible ? '30px' : '0', 'marginBottom' : '4px'}">
                <span v-if="data.collapsible" @click="clickToggle" :class="['ddct_toggle', {'ddct_collapse_toggle' : !data.expanded}]"></span>
                <input type="checkbox" v-model="data.checked" v-indeterminate="data.indeterminate"> <span>{{data.name}}</span>
                <div :class="data.class">
                    <dd-treeview-inner :expanded="data.expanded" v-for="child in data.children" v-bind:data="child" v-bind:root="root+1" v-on:change="propUp"></dd-treeview-inner>
                </div>
            </div>
            <div v-else>
            <dd-treeview-inner :expanded="data.expanded" v-for="child in data.children" v-bind:data="child" v-bind:root="root+1" v-on:change="propUp"></dd-treeview-inner>
            </div>
        </template>

  <div id="app">
    <dd-treeview v-bind:data="data" v-model="treeVals"></dd-treeview>
    <div v-for="val in treeVals">{{val}}</div>
  </div>

</body>

</html>

关于javascript - 如何修复带有复选框的 vue 更新？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55167842/

25 4 0
文章推荐： javascript - 如何让 @babel/parser 将 'undefined' 识别为特殊标记？
文章推荐： javascript - 将 Observable.subscribe() 返回的值分配给 const
文章推荐： javascript - jQuery为多个输入添加点击功能
文章推荐： javascript - TypeError : Post. create 不是 mongodb 的函数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com