Javascript vue2使用多个组件禁用输入

Vue 2-禁用输入-多个组件

大家好

我很难解决一个问题，我想禁用其他输入字段，一旦在另一个输入字段中输入了第一个字符

我一直试图用$emit、@focus和其他解决方案来解决这个问题，但我仍然被卡住了。我也无法利用这里的答案

片段：

const自动完成={
名称：“自动完成”，
道具：{
项目：{
类型：数组，
必填项：false，
默认值：（）=>['test']
},
isAsync：{
类型：布尔型，
必填项：false，
默认值：false
},
模板锁：{
类型：布尔型，
},
formId：{
类型：字符串，
}
},
数据（）{
返回{
伊索彭：错，
结果：[]，
搜索：“，
孤岛加载：false，
箭头计数器：0，
};
},
方法：{
onChange（）{
//让我们警告家长已进行了更改
this.$emit（“输入”，this.search）；
//数据是否由外部ajax请求提供？
if（this.isAsync）{
this.isLoading=true；
}否则{
//让我们搜索平面阵列
this.filterResults（）；
this.isOpen=真；
}
if（this.search.length==0）{
this.isOpen=false；
}
console.log（this.search.length）；
},
禁用其他（）{
var searchForms=document.getElementsByClassName（'searchForm'）；
对于（i=0；i{
返回item.toLowerCase（）.indexOf（this.search.toLowerCase（））>-1；
});
},
设置结果（结果）{
this.search=结果；
this.isOpen=false；
},
onArrowDown（evt）{
if（this.arrowCounter0）{
this.arrowCounter=this.arrowCounter-1；
}
},
onEnter（）{
this.search=this.results[this.arrowCounter]；
this.isOpen=false；
这个.arrowCounter=-1；
},
外部把手（evt）{
如果（！此.$el.包含（evt.target））{
this.isOpen=false；
这个.arrowCounter=-1；
}
}
},
安装的（）{
document.addEventListener（“单击”，此.handleClickOutside）；
},
销毁（）{
document.removeEventListener（“单击”，this.handleClickOutside）；
},
模板：`


加载结果。。。


{{result}}


`,
};
新Vue({
el:#productSearchApp“，
名称：“productSearchApp”，
数据（）{
返回{
产品名称：[]，
产品目录：[]，
洛克：错，
searchName:“searchForm”，
searchCatalog:“searchCatalog”
}
},
安装的（）{
取回（“http://cormay.314-work.pl/wp-json/wp/v2/product")
.then（response=>response.json（））
。然后（（数据）=>{
对于（i=0；i
也许你可以使用像或这样的状态管理器
... 比如：


//全局状态
Vue.prototype.$state=新Vue({
数据：{
活动：空
}
})
//输入组件
Vue.component（'Vue-input'{
道具：['value']，
模板：`
`,
数据（）{
返回{
//避免突变
模型：这个值
}
},
在…之前{
//重置状态，以防移除活动组件
如果（this.$state.active==this）this.$state.active=null；
},
观察：{
模型（值）{
//如果值长度>0或活动值为空，则将活动设置为“this”
this.$state.active=value.length？this:null；
}
},
计算：{
残疾人士（）{
//如果active不为null且不等于“this”，则禁用
返回此。$state.active&&this。$state.active！==this；
}
}
})
//应用程序实例
新Vue({
el:“#应用程序”，
数据：{
foo:null，
条：空
}
})
标签{
字体：标题；
显示器：flex；
证明内容：之间的空间；
宽度：160px；
边缘底部：10px；
}
输入：禁用{
背景：红色；
}

福
酒吧
您可以试试这样的方法

您会注意到，我来回传递了一点模型的名称，这可能看起来很麻烦，但如果您将其配置为v-for循环的一部分，那么管理起来就会很容易


Vue.component（'custom-input'{
道具：['value'，'disabled']，
模板：`
`
})
新Vue({
el:“#应用程序”，
数据：{
第一：空，
第二：空，
活动：空
},
方法：{
onChange（e，型号）{
this.active=null
如果（e.长度>0）{
this.active=model
}
}
},
})

福
酒吧
这看起来非常优雅朴素。我为没有早点看到这一点感到很愚蠢：）谢谢你！谢谢你，雅各布。我还不想进入vuex，但我也喜欢这个解决方案！对我来说很有价值的学习！更新！-我添加了beforeDestroy，以便在活动组件被破坏的情况下进行内务处理。