将表单输入数据与javascript和vuejs连接起来

我有一个带有vuejs的表单，希望在提交输入字段中的数据时连接起来。我附上了一份报告，试图解决concat问题，但没有成功

对于三个输入字段，我有三个vue VoComponent，其中第一个是下拉列表，其中自定义选项应更改为输入文本字段

如果我试图连接这三个数据，js会给我未定义的错误

newvue({
el:“#产品id”，
数据：{
已选定：“1”，
选项：[
{text:'Product 1'，id:'1'，value:'1'}，
{text:'Product 2'，id:'2'，value:'2'}，
{text:'Product 3'，id:'3'，value:'3'}，
{text:'Product 4'，id:'4'，value:'4'}，
{text:'Custom'，id:'5'，值：'''
],
产品名称：''，
重置键：0，
},
方法：{
updateComponent（）{
此参数为0.resetKey+=1；
console.log（this.resetKey）；
console.log（'test'）；
}
},
}),
新Vue({
el:“产品名称”，
数据：{
产品名称：''，
}
});
新Vue({
el:“产品价格”，
数据：{
产品名称：''，
}
});
函数组合_产品_数据（）{
var id=document.getElementById（'input1'）。值；
var name=document.getElementById（'input2'）。值；
var price=document.getElementById（'input3'）。值；
document.getElementById（'joint'）。value=id+'.'.+name+'/'+price；
警报（document.getElementById（'joint'）.value）；
}

产品id
{{option.text}


重置


产品名称



产品价格



合并数据

查看代码，我不太确定为什么需要三个不同的Vue实例。您可以简单地将整个内容放在一个包装器下，并使用一个Vue实例。然后，您可以将javascript函数放在一个实例中，而不必使用文档选择器来获取组合值。修订后的代码如下（修订后的js FIDLE）：

newvue({
el:“#应用程序”，
数据：{
已选定：“1”，
选项：[
{text:'Product 1'，id:'1'，value:'1'}，
{text:'Product 2'，id:'2'，value:'2'}，
{text:'Product 3'，id:'3'，value:'3'}，
{text:'Product 4'，id:'4'，value:'4'}，
{text:'Custom'，id:'5'，值：'''
],
产品名称：''，
重置键：0，
产品名称：''，
产品名称：“”
},
方法：{
updateComponent（）{
此参数为0.resetKey+=1；
console.log（this.resetKey）；
console.log（'test'）；
},
组合数据（）{
常数{product_i，product_n，product_p}=这个；
警报（`id:${product\u i}，name:${product\u n}，price:${product\u p}`）
}
},
})

产品id
{{option.text}
重置
产品名称

产品价格

合并数据

查看代码，我不太确定为什么需要三个不同的Vue实例。您可以简单地将整个内容放在一个包装器下，并使用一个Vue实例。然后，您可以将javascript函数放在一个实例中，而不必使用文档选择器来获取组合值。修订后的代码如下（修订后的js FIDLE）：

newvue({
el:“#应用程序”，
数据：{
已选定：“1”，
选项：[
{text:'Product 1'，id:'1'，value:'1'}，
{text:'Product 2'，id:'2'，value:'2'}，
{text:'Product 3'，id:'3'，value:'3'}，
{text:'Product 4'，id:'4'，value:'4'}，
{text:'Custom'，id:'5'，值：'''
],
产品名称：''，
重置键：0，
产品名称：''，
产品名称：“”
},
方法：{
updateComponent（）{
此参数为0.resetKey+=1；
console.log（this.resetKey）；
console.log（'test'）；
},
组合数据（）{
常数{product_i，product_n，product_p}=这个；
警报（`id:${product\u i}，name:${product\u n}，price:${product\u p}`）
}
},
})

产品id
{{option.text}
重置
产品名称

产品价格

合并数据

请添加导致错误的代码我尝试使用的代码在之前添加的JSFIDLE链接上。嘿，蒂基努，我看看你的代码，如果你只是想让你的v-if/v-else逻辑工作，只需删除：
标记（从HTML代码中）逻辑将起作用：）当你使用v-if和v-else-if或v-else时，你不能在这些代码之间插入任何代码，好吗？希望有帮助；）谢谢你Julliano，事实上我去掉了br标签，这部分工作正常。连接呢？或者，如果我从列表中选择“自定义”选项并出现“输入”字段，您是否可以帮助我使用“重置”按钮重新启动下拉列表组件。有可能吗？请添加导致错误的代码我尝试使用的代码在之前添加的JSFIDLE链接上。嘿，Tikinu，我看看你的代码，如果你只是想让你的v-if/v-else逻辑工作，只需删除：
标记（从HTML代码中），当你