选择 2 标记移动到上一行

Posted 2023-05-07

【中文标题】选择 2 标记移动到上一行

【英文标题】：Select 2 markup moving to previous row

【发布时间】：2020-01-30 16:12:27

【问题描述】：

我有一个 vuejs 应用程序，它遍历一个数组并输出大量 select2 元素。每个元素旁边都有一个删除按钮。当其中一个元素被删除时，会出现错误/故障，这意味着先前的 select2 值将应用于前一行。

这是一个演示：https://jsfiddle.net/3oqsmw0z/1/

我按如下索引删除项目：

deleteItem: function(index) 
    console.log('deleteItem');
    this.mySelects.splice(index, 1);

复制问题

在第一个选择中选择第一个选项，在第二个选择中选择第二个选项，然后在第三个选择中选择第三个选项。现在，删除第二个选项。理论上它现在应该显示元素一和三（两个已被删除）。但它显示选择了第二个选项。您可以通过标签看到它是第三个元素，如果您查看控制台中的标记，它就是第三个元素。为什么显示第二个选择的选项？

【参考方案1】：

实际上，当您删除第二个元素时，会再次设置第三个元素的值。所以值观察者处理程序被执行。在您的处理程序中，您尝试使用 jQuery 设置值：

watch: 
    value: function (value) 
      // update value
      $(this.$el).val(value)
    ,...

但它不起作用，因为此操作不会触发 change 事件。所以 Vue 不会渲染任何变化。

要修复它显式触发change 事件：

 watch: 
    value: function (value) 
      // update value
      $(this.$el).val(value).trigger('change')
    ,...

我还在您的演示中注意到您的 select 元素未正确初始化。你通过了：

mySelects: [
      label: 'first', val: 1,
      label: 'second', val: 2,
      label: 'third', val: 3
    ],...

因此，在第一个 select 中必须选择值 1，在第二个中 - 值 2 等等。

修复它有两个步骤：

设置值后显式触发change事件 通过选项后设置值

 mounted: function () 
    var vm = this
    $(this.$el)
    // first pass the options
      .select2( data: this.options )
    // and then set the value
      .val(this.value)
    // trigger change event explicitly to let Vue know that it has to update DOM
      .trigger('change')
    // emit event on change.
      .on('change', function () 
        vm.$emit('input', this.value)
      )
  ,

【讨论】：

谢谢，我需要搞乱更改事件等吗？除了删除某些内容之外，一切都运行良好。

是的，你知道。否则，当值以编程方式更改时（例如在删除的情况下），您将遇到问题。您的 v-model 绑定将无法正常工作。在article 中，他们说：如果 jQuery 对 Vue 管理的元素进行更改，Vue 将不会意识到更改，并且会继续并在下一个更新周期中覆盖它。另请参阅 Vue.js 的 Wrapper Component Example。