带有过滤器复选框的 VueJs v-for 在下一项被选中

Question

请运行剪下的代码以查看复制的问题。

我有一个带有以下逻辑的 boolAutoFilter 函数：

如果过滤器为空，则所有项目都通过测试

如果过滤器是真/假项目通过如果道具等于过滤器val

问题是...当 bool 过滤器设置为 false，并且用户单击复选框将属性值从 false 更改为 true 时，该项目消失并且下一个项目的复选框变为选中状态，即使 prop val 仍然为 false。

 function boolAutoFilter(item, boolFilters) { var returnVal = true; for (var prop in boolFilters) { if (!item.hasOwnProperty(prop) || boolFilters[prop] === null) continue; returnVal = returnVal && ((item[prop] || false) === boolFilters[prop]); } return returnVal; }; window.onload = function () { window.app = new Vue( { el: '#app', data: { filters: { boolFilters: { active: false, }, stringFilters: {}, }, items: [ { id: 1, active: false }, { id: 2, active: false }, { id: 3, active: false }, { id: 4, active: false }, { id: 5, active: false }, { id: 6, active: false }, { id: 7, active: false }, { id: 8, active: false } ] }, methods:{ mainItemFilter: function (item) { const boolFilters = this.filters.boolFilters; var rVal = true; rVal = rVal && boolAutoFilter(item, boolFilters); return rVal; } }, computed: { filteredItems() { var vm = this; return this.items.filter(function (item) { return vm.mainItemFilter(item); }); } } }) }

 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <div id="app"> <table> <tbody> <tr v-for="item in filteredItems"> <td> {{item.id}} </td> <td> <input type="checkbox" v-model="item.active" /> </td> </tr> </tbody> </table> {{items}} </div>

Answer 1

您需要为在“v-for”中循环的所有元素添加一个唯一的key属性，否则 Vue 将尝试再次重用组件的相同实例，以便反映发生在一个实例上的任何状态更改在所有其他情况下。

尝试将循环更改为<tr v-for="(item, index) in filteredItems" v-bind:key="item + "_" + index" />

（使用模板文字而不是item + "_" + index ），这只是因为 Markdown 使用了我在编写代码块时无法显示的相同符号。

Answer 2

我认为您遇到了问题，因为您正在使用“活动”属性来过滤项目和选中状态。

我向 items 数组中的对象添加了“checked”属性并更新了 html 以使用 item.checked 而不是 item.active 并且复选框不再消失。

function boolAutoFilter(item, boolFilters) {
    var returnVal = true;
    for (var prop in boolFilters) {
        if (!item.hasOwnProperty(prop) || boolFilters[prop] === null)
            continue;
        returnVal = returnVal && ((item[prop] || false) === boolFilters[prop]);
    }
    return returnVal;
};
window.onload = function () {
    window.app = new Vue(
        {
            el: '#app',
            data: {
              filters: {
                  boolFilters: {
                      active: false,
                  },
                  stringFilters: {},
              },
              items: [
                //updated with checked
                { id: 1, active: false, checked: false },
                { id: 2, active: false, checked: false },
                { id: 3, active: false, checked: false },
                { id: 4, active: false, checked: false },
                { id: 5, active: false, checked: false },
                { id: 6, active: false, checked: false },
                { id: 7, active: false, checked: false },
                { id: 8, active: false, checked: false }
              ]
            },
            methods:{
                mainItemFilter: function (item) {
                    const boolFilters = this.filters.boolFilters;
                    var rVal = true;
                    rVal = rVal && boolAutoFilter(item, boolFilters);


                    return rVal;
                }
            },
            computed: {
                filteredItems() {
                    var vm = this;

                    return this.items.filter(function (item) {
                        return vm.mainItemFilter(item);
                    });
                }
            }
        })
}

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <table>
    <tbody>
      <tr v-for="item in filteredItems">
        <td>
          {{item.id}}
        </td>
        <td>
          <!-- updated with checked -->
          <input type="checkbox" v-model="item.checked" />
        </td>
      </tr>
    </tbody>
  </table>
  {{items}}
</div>

希望这可以帮助您走上正轨。