Question

我正在尝试在v-expansion-panel中使用多个按钮和文本字段。

问题：如您在下面看到的，如果我单击面板0内的按钮，则会启用内部的文本字段所有面板，这是不应该发生的。

我使用了enable标志，我感觉这不是正确的方法，有什么方法可以实现？可能使用id作为键并附加到按钮？

new Vue({
  el: '#app',
  data () {
    return {
      openedPanel: [],
      enable:false,
      items:[
        {id:1,name:'panel l'},
         {id:2,name:'panel 2'},
         {id:3,name:'panel 3'},
          {id:4,name:'panel 4'}
      ]
    }
  },
  watch:{
    openedPanel(val){
      console.log(val,this.items);
      let panelArray=val;
      
      this.items.forEach(function (value, i) {
        value=value.panelValue=val[i]
});
    },
     
  }
})

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.24/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.24/dist/vuetify.min.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-layout row>
     <v-expansion-panel  popout v-model="openedPanel" expand>
      <v-expansion-panel-content
        v-for="(item,i) in items"
        :key="i"
      >
        <template v-slot:header>
           <v-flex xs6 pa-0 ma-0 v-if="!enable">
              <v-btn 
                 flat
                 @click="(e)=> {  e.cancelBubble = true;enable=!enable}"
                 :disabled="!item.panelValue">
                Show TextField {{i}}
               </v-btn>
              </v-flex>
              <v-flex xs6 pa-0 ma-0 v-if="enable">
              <v-text-field 
                             :disabled="!item.panelValue"
                             style="backgroundColor:#3D8D7C" height="20px" 
                            placeholder="Edit text field"
                            class="pa-0 ma-0" >
               </v-text-field>
              </v-flex>
          <div>Panel {{i}}</div>
        </template>
        <v-card>
          <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-card-text>
        </v-card>
      </v-expansion-panel-content>
    </v-expansion-panel>
    </v-layout>
  </v-app>
</div>

任何建议都会有所帮助。

v展开面板中的动态v按钮和v文本字段vuetify

0 个答案: