As a novice, I am currently working on creating a Vuetify form that includes three <v-file-input> elements, each with a corresponding <v-select> option. My goal is to update the label of each <v-file-input> with the selected value from its respective <v-select>.
I would greatly appreciate any assistance in solving this issue. You can find my code on CodePen: 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="badcd5d4cefa8e94c2">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88fefdedfce1eef1c8baa6f0">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f191a0a2f5d4117">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82f4f7e7f6ebe4fbc2b0acfa">[email protected]</a>/dist/vuetify.js"></script>
</body>
</html>