vue下的@change事件转载

房东最近在这个项目中实践了这一点。vue在这段时间里，我遇到了一些坑。现在我想把它们录下来。

先上代码

    
    
    
    
    
          
	      
	



    

        
            请选择
            {{province.text}}
        
        
            请选择
            {{city.text}}
        
    

如果你遵循通常的使用习惯，似乎没有太大问题。在切换父元素时进行监听。change事件链接子元素的值变化与常年使用非常一致。jQuery养成习惯，效果如图所示：

image.png

如果页面上有多个位置使用相同的链接效果，该怎么办？让我们看看效果会是什么，如图所示。

        
            请选择
            {{province.text}}
        
        
            请选择
            {{city.text}}
        
        
            请选择
            {{province.text}}
        
        
            请选择
            {{city.text}}
        

image.png

其结果是相互影响,这不是我们想看到的。

我的解决方案是，citys代码重写如下，而不是绑定唯一存在的相同数组：

        
            请选择
            {{city.text}}
        

            getCity:function (id) {
                var citys=this.areas.filter(function (city) {
                    return city.pid == id;
                })
                return citys;
            }

效果如下：

image.png

正如你所看到的，它不再影响彼此。

总结： 类似vue的mvvm框架都是数据和视图绑定的，而change事件通常用于在视图更改时操作数据。mvvm框架本身已经将视图的更改映射到数据，因此大多数change不需要事件监控，对应vue，可以重写methods方法或者computed已计算的特性。