我是这里的初学者。我正在创建一个包含三个 <v-file-input> 的 vuefity 表单每个都有一个<v-select>回顾性选择。
我想附加 <v-select> 中的值当值更改为其各自的标签时 <v-file-input> .
请帮我解决这个问题。代码笔:https://codepen.io/jx46/full/pooMwQp
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
items: ['one', 'two', 'three']
})
})<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-content>
<v-container>
<v-form>
<v-row>
<v-col>
<v-select :items="items" label="Standard"></v-select>
</v-col>
<v-col>
<v-file-input label="File input"></v-file-input>
</v-col>
</v-row>
<v-row>
<v-col>
<v-select :items="items" label="Standard"></v-select>
</v-col>
<v-col>
<v-file-input label="File input"></v-file-input>
</v-col>
</v-row>
<v-row>
<v-col>
<v-select :items="items" label="Standard"></v-select>
</v-col>
<v-col>
<v-file-input label="File input"></v-file-input>
</v-col>
</v-row>
</v-form>
</v-container>
</v-content>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
</body>
</html>最佳答案
您必须为每对定义data(v-select- v-input)。然后将其绑定(bind)为 v-model 和 :label。
模板:
<v-select
v-model="firstSelectValue"
:items="items"
label="Standard"
></v-select>
<v-file-input :label="firstSelectValue"></v-file-input>
JS:
data: () => ({
items: ['one','two','three'],
firstSelectValue: 'File input',
secondSelectValue: 'File input',
thirdSelectValue: 'File input',
})
关于javascript - 当值更改为其各自 <v-file-input> 的标签时，如何附加 <v-select> 中的值 |维特化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59082799/