Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
569 views
in Technique[技术] by (71.8m points)

javascript - 如何从中追加值 <v-select> 当值更改为各自的标签时 <v-file-input> | 威化(How to append the value from <v-select> when value changed to the label of it's respective <v-file-input> | Vuetify)

i'm a beginner here.(我是这里的初学者。)

I'm creating a vuefity form with three <v-file-input> each having one <v-select> option retrospectively.(我正在创建一个带有三个<v-file-input>的vuefity表单,每个表单具有一个<v-select>选项。) i would like to append the value from <v-select> when value changed to the label of it's respective <v-file-input> .(当值更改为其各自的<v-file-input>的标签时,我想从<v-select>附加值。) Please help me, solve this problem.(请帮我,解决这个问题。) CodePen : https://codepen.io/jx46/full/pooMwQp(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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script> </body> </html>   ask by Jijo Johny translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

You must define data for each pair ( v-select - v-input ).(您必须为每对定义datav-select - v-input )。)

Then bind it as v-model and :label .(然后将其绑定为v-model:label 。) Template:(模板:) <v-select v-model="firstSelectValue" :items="items" label="Standard" ></v-select> <v-file-input :label="firstSelectValue"></v-file-input> JS:(JS:) data: () => ({ items: ['one','two','three'], firstSelectValue: 'File input', secondSelectValue: 'File input', thirdSelectValue: 'File input', }) Changed Codepen: https://codepen.io/RobbyFront/pen/eYYqEBx(更改的Codepen: https ://codepen.io/RobbyFront/pen/eYYqEBx)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...