当值更改为相应 <v-file-input> 的标签时如何从 <v-select> 附加值 |验证答案

【问题标题】：How to append the value from <v-select> when value changed to the label of it's respective <v-file-input> | Vuetify当值更改为相应 <v-file-input> 的标签时如何从 <v-select> 附加值 |验证
【发布时间】：2020-03-23 18:04:43
【问题描述】：

我是这里的初学者。我正在创建一个 vuefity 表单，其中三个 <v-file-input> 每个都有一个 <v-select> 选项。我想在值更改为相应<v-file-input> 的标签时附加来自<v-select> 的值。

请帮帮我，解决这个问题。代码笔：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>

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

您必须为每对定义data (v-select- v-input)。然后将其绑定为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',
})

已更改 Codepen：https://codepen.io/RobbyFront/pen/eYYqEBx

【讨论】：

如果<v-select> items 数据是一个包含文本和值的对象怎么办。那么如何在<v-file-input> 标签上附加选中的文本值呢？
我不太明白你提到的“带有文本和价值的对象”是什么。你能举个例子吗？
传递给<v-select :items="item">项目的数据是一个javascript对象。 items: [ {text: "One", value : '1'}, {text: "Two", value : '2'}, {text: "Three", value : '3'}, ]
我理解你，但你必须在 SO 上创建另一个问题，因为它与原始问题不同。