[英]Pass select option value to input field using VueJS
我试图从选择选项中获取值并将其传递给输入字段名称，以便在单击按钮时可以创建不同的输入字段。
到目前为止，我有一个输入字段数组，但是我不确定如何获取选择选项值并在输入名称字段中输出该值，每次单击按钮都将其重置。
标记
<div id="app">
<ul>
<li v-for="(input, index) in inputs">
<input type="text" v-model="input.one">
<button @click="deleteRow(index)">Delete</button>
</li>
</ul>
<select v-model="inputType">
<option selected="selected">Select a field to add</option>
<option value="text">Text</option>
<option value="file">File</option>
<option value="email">email</option>
</select>
<button @click="addRow">Add row</button>
</div>
VueJS
const app = new Vue({
el: '#app',
data: {
inputs: []
},
methods: {
addRow() {
this.inputs.push({
one: ''
})
},
deleteRow(index) {
this.inputs.splice(index,1)
}
}
})
JSFiddle- https: //jsfiddle.net/u2r1fpu4/
将选择输入的值绑定到inputType后，只需使用inputType变量即可。
<div id="app">
<ul>
<li v-for="(input, index) in inputs">
<input v-bind:type="input.type">
<button @click="deleteRow(index)">Delete</button>
</li>
</ul>
<select v-model="inputType">
<option selected="selected">Select a field to add</option>
<option value="text">Text</option>
<option value="file">File</option>
<option value="email">email</option>
</select>
<button @click="addRow">Add row</button>
const app = new Vue({
el: '#app',
data:
{
inputs: [],
},
methods: {
addRow() {
this.inputs.push({
type: this.inputType
})
},
deleteRow(index) {
this.inputs.splice(index,1)
}
}
});
我不确定您要完成什么，所以我只是在这里猜测
const app = new Vue({ el: '#app', data: { inputs: [], selection: "" }, methods: { addRow(selection) { this.inputs.push({ type:selection, one: '' }) }, deleteRow(index) { this.inputs.splice(index,1) } } })
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id="app"> <ul> <li v-for="(input, index) in inputs"> <input v-if="input.type === 'text'" type="text" v-model="input.one"> <input v-else-if="input.type === 'file'" type="file" v-model="input.one"> <input v-else-if="input.type === 'email'" type="email" v-model="input.one"> <button @click="deleteRow(index)">Delete</button> {{input.type}} </li> </ul> <select v-model="selection"> <option value="" >Select a field to add</option> <option value="text">Text</option> <option value="file">File</option> <option value="email">email</option> </select> <button @click="addRow(selection)">Add row</button> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> </body> </html>
请注意，您不能执行<input :type="input.type" v-model="input.one"> ，而需要具有一组v-if/v-else-if
如何使用 jquery 将输入字段中的值传递给 select 选项？
[英]How can I pass a value from input field to a select option using jquery?
如何使用 jquery 将单个信息从 select 选项列表视图传递到特定输入字段
[英]How to pass individual info to specific input field from select option list view using jquery
如何将选择选项中选定值的值传递给方法vuejs中的onchange函数？
[英]how to pass value of selected value in select option to onchange function in methods vuejs?
在vuejs中使用`v-select`时，如何获取`id`值作为选项值和`cname`作为选项标签？
[英]How to get `id` value as option value and `cname` as option label when using `v-select` in vuejs?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.