Vuejs wapper组件绑定多个值
Vuejs wapper组件绑定多个值
提问于 2020-01-31 18:55:38
我有一个输入包装器组件，它有一个Select，并显示一个自由形式的文本框，用户可以在其中输入确切的金额。
我不知道如何将自由格式文本框绑定到父字段以及用户选择的选项。我不确定如何发出更改/输入。
尝试从Custom Events docs跟踪此内容
这里有一个简单的例子：
InputWrapper：
<template v-if="inputType === 'text'">
<input type="text" v-bind:value="value" v-bind="$attrs" v-on="inputListeners">
</template>
<template v-else-if="inputType === 'select'">
<select v-bind="$attrs" v-bind:value="value" v-on="inputListeners">
<option value>Select</option>
<option
v-for="option in options"
v-bind:value="option.Id"
v-bind:key="option.Id"
>{{option.Description}}</option>
</select>
<!--Only show the input if it's a "FreeformOption"-->
<!--How do I make this update the parent??-->
<input
type="text"
v-if="selectedOption.IsFreeformOption"
v-bind:value.sync="freeformValue"
v-bind="$attrs"
v-on:update="$emit('update:person.ExactIncome', '111')"
v-on:input="$emit('input:person.ExactIncome', '222')"
>
<!--Would ideally recursively call the InputWrapper component
<InputWrapper
inputType="text"
v-if="selectedOption.IsFreeformOption"
v-bind:value= "freeformValue"
v-on:input="$emit('input', $event)"
></InputWrapper>
-->
</template>演示：
<InputWrapper
id="incomeLevels"
inputType="select"
:options="incomeLevels"
:freeformValue.sync="person.ExactIncome"
v-model="person.IncomeLevelID"
></InputWrapper>工作演示：
Essential将freeformValue封装在计算器中，并在那里发出更改。
wrappedFreeform: {
get() {
return this.freeformValue;
},
set(v) {
this.$emit("update:freeformValue", v);
}
}
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-01-31 19:56:43
您已经在尝试使用.sync，这是一种可能的解决方案。像下面的代码一样传递原始值并不起作用，而且会产生Vue警告，因为我们直接改变了属性：
// InputWrapper
<input
v-model="freeformValue"
>
// Demo
<InputWrapper
:freeformValue.sync="person.ExactIncome"
></InputWrapper>我们可以将整个对象作为prop传递，如下例所示。这是有效的，不会产生任何警告，但传递一个对象并不总是最优的解决方案，并且突变的来源仍然不清楚。
// InputWrapper
<input
v-model="freeformValue.ExactIncome"
>
// Demo
<InputWrapper
:freeformValue.sync="person" //pass an object here
></InputWrapper>@MisterIsaak提出的解决方案更方便：
// InputWrapper
<input
v-model="wrappedFreeform"
>
computed: {
wrappedFreeform: {
get() {
return this.freeformValue; // here we just get the value
},
set(v) {
this.$emit("update:freeformValue", v); // emmit an event instead of mutating the prop directly
}
}
}
// Demo
<InputWrapper
:freeformValue.sync="person.ExactIncome" //the value will be updated properly
></InputWrapper>Stack Overflow用户
发布于 2020-01-31 20:12:36
Emit是对父组件中一个函数的引用
在您的示例中，输入将是
<input
type="text"
v-if="selectedOption.IsFreeformOption"
:value="freeformValue"
@input="$emit('updateFreeFormValue', $event.target.value)"
>在你的父母中
<InputWrapper
id="incomeLevels"
inputType="select"
:options="incomeLevels"
:freeformValue.sync="person.ExactIncome"
v-model="person.IncomeLevelID"
@updateFreeFormValue="updateFreeFormValue"
></InputWrapper>和你的方法
methods: {
updateFreeFormValue(value){
this.person.ExactIncome = value;
}
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60009750
复制相关文章
相似问题
腾讯云开发者
