Question

我正在使用v-treeview进行嵌套选择。如何在初始加载期间选择某些项目？我们如何访问树视图中项目的复选框属性？选择后，v-model数组提供了所选项目的选项，我尝试在加载过程中更新此数组，但是没有用。

请参见下面的代码，单击“保存”，tree1数组将更新为选定的项目ID。我已经尝试过，在此数组中添加一些ID以模拟所选的项目，但确实起到了帮助作用。

<script>
export default {
  data: () => ({
   
    isLoading: false,
    accounts: [],
    isLoading1: false,
    tree1: ['174'],
    mspName: '',
    selectedList: [{id: '174', selected: true},{id: '191', selected: true}]
    
  }),

  computed: {
    
    items2() {
      
      */
      console.log('computed: items 2 called');
      
      var children = this.accounts.filter(function(cur){
        if(cur.parent =='0') {
          return [{id: cur.id,name: cur.msp_name}];
        }

      });
      
      console.log(children);
      console.log('length of children: '+children.length)
      const having_parent = this.accounts.filter(function(cur){
        if(cur.parent !=='0') {
          var parent_index = children.findIndex(element => element.id ===cur.parent);
          console.log('found parent: '+parent_index);
          if(children[parent_index]['children'] == undefined) {
            children[parent_index]['children']=[];
          }
          
          children[parent_index]['children'].push(cur);
        }
      });
      
      return([{id: 1,name: this.mspName, children}]);
      
    },
    selections1() {
      const selections1 = [];

      for (const leaf of this.tree1) {
        const account = this.accounts.find(account => account.id === leaf);

        if (!account) continue;

        selections1.push(account);
      }

      return selections1;
    },
    shouldShowTree1() {
      return this.accounts.length > 0 && !this.isLoading1;
    },
    
  },

  methods: {
    
    fetchAccounts() {
      console.log('fecth accounts called...')
      if (this.accounts.length) return;

      return fetch("http://192.168.2.74:4000/msp", { method: "POST" })
        .then(res => res.json())
        .then(data => {
          this.accounts = data[0].msp_accounts;
          this.mspName = data[0].msp_name;
          console.log("msp accounts fetched");
          console.log(this.accounts);
        })
        .catch(err => console.log(err));
    },
    
    
    save() {
      console.log('save clicked');
      console.log(this.tree1);
    }
  },
  mounted() {
    this.fetchAccounts();
   
  }
};
</script>

<template>
  <v-card>
    <v-toolbar card color="grey lighten-3">
      <v-icon>home</v-icon>
      <v-toolbar-title></v-toolbar-title>
    </v-toolbar>

    <v-layout>
      <v-flex>
        <v-card-text>
          <v-treeview
            v-model="tree1"          
            :items="items2"
            activatable
            active-class="grey lighten-4 indigo--text"
            selected-color="indigo"
            open-on-click
            selectable
            expand-icon="mdi-chevron-down"
            on-icon="mdi-bookmark"
            off-icon="mdi-bookmark-outline"
            indeterminate-icon="mdi-bookmark-minus"

          ></v-treeview>
        </v-card-text>
      </v-flex>

      <v-divider vertical></v-divider>

      <v-flex xs12 md6>
        <v-card-text>
          <div
            v-if="selections1.length === 0"
            key="title"
            class="title font-weight-light grey--text pa-3 text-xs-center"
          >Select your accounts</div>

          <v-scroll-x-transition group hide-on-leave>
            <v-chip v-for="(selection, i) in selections1" :key="i" color="grey" dark small>
              <v-icon left small>trash-can</v-icon>
              {{ selection.name }}
            </v-chip>
          </v-scroll-x-transition>
        </v-card-text>
      </v-flex>
    </v-layout>

    <v-divider></v-divider>

    <v-card-actions>
      <v-btn flat @click="tree1 = []">Reset</v-btn>

      <v-spacer></v-spacer>

      <v-btn class="white--text" color="green darken-1" depressed @click="save">
        Save
        <v-icon right>mdi-content-save</v-icon>
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

Answer 1

vuetify标签中有两件事

V型
项目

解决方案

只需将与项和子项样式相关的项中的所有数据推送。
对于仅在初始加载期间检查数据的情况，只需在创建的钩子上的v-model中传递这些项目即可。
现在，“检查输出”显示为选中的框。

希望它会有所帮助。！

v-treeview使项目在初始加载期间被检查

1 个答案: