Question

我有一个vuetify 2.0视图列表，选择该视图时会填充一个用于编辑的表单（标准的列表详细设计模式）。选中的项目在列表中突出显示，这很好（我知道我可以将其关闭...）。我想做的是再次选择选定的项目以清除表单，或者用户单击[清除]按钮取消选择列表项。

我在App或Vuetify对象中都看不到任何跟踪此状态的信息。如何将表单的填充状态与view-list-item的选定/活动状态关联起来

codepen示例 https://codepen.io/E4CAaron/pen/NWWeBXZ

以下示例代码：脚本；

 new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: {
        msg: 'Hello',
        email: '',
    rules:[
      {id:"1","name":"rule one",conversion_rate:"1.17",round_to_nearest:".05",isRRP:"0"},
      {id:"2",name:"rule two",conversion_rate:"1.17",round_to_nearest:".05",isRRP:"0"},
      {id:"3",name:"rule three",conversion_rate:"1.17",round_to_nearest:".05",isRRP:"0"},
      {id:"4",name:"rule four",conversion_rate:"1.17",round_to_nearest:".05",isRRP:"0"},
      {id:"5",name:"rule five",conversion_rate:"1.17",round_to_nearest:".05",isRRP:"0"}

    ],
    SelectedRule:{},
    state:{
      formIsDirty:false
    }
    },
    methods: {
      editRule(rule){
        this.SelectedRule = Object.assign({},rule);
        this.state.formIsDirty = false
      },
      clearRule(){
        this.SelectedRule ={}
      },
      dirtyForm(){
        this.state.formIsDirty =true;
      },
      onScroll (e) {
        this.offsetTop = e.target.scrollTop
      },
    }
})

HTML：

<div id="app" v-cloak>
<v-app>
  <v-container>
    <v-row>
       <v-col cols="4">

        <v-list 
                dense
                id="scroll-target"
                style="max-height: 100%"
                class="overflow-y-auto" 
                >
          <v-subheader>Rules</v-subheader>
          <v-list-item-group
                             color="warning"
                             dense
                             >

            <v-list-item 
                         v-for="rule in rules" 
                         :key="rule.id"
                         @click="editRule(rule)"
                         >
              {{rule.name}}
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </v-col> 
      <v-col cols="8">
        <v-form fixed >
          <v-text-field label="Rule Name" v-model="SelectedRule.name" @change="dirtyForm"></v-text-field>
          <v-text-field label="Conversion Rate" v-model="SelectedRule.conversion_rate" @change="dirtyForm"></v-text-field>
          <v-text-field label="Round To Nearest" v-model="SelectedRule.round_to_nearest" @change="dirtyForm"></v-text-field>
          <v-checkbox label="is Brand RRP" v-model="SelectedRule.isRRP" checked @change="dirtyForm"></v-checkbox>
          <v-btn color="primary" :disabled="!state.formIsDirty">Save</v-btn>
          <v-btn color="info" @click="clearRule()">Clear</v-btn>

        </v-form>
      </v-col>
    </v-row>
  </v-container>
</v-app>
</div>

Answer 1

您可以检查规则是否已被选中（存储在SelectedRule变量中，以及在编辑规则方法中，只需将SelectedRule值设置为空对象即可。

editRule(rule){
  if (this.SelectedRule.id === rule.id) {
    this.SelectedRule = {}
  } else {
    this.SelectedRule = Object.assign({},rule);
    this.state.formIsDirty = false
  }
}

我已经在您提供的Codepen上测试了此代码。

Answer 2

将v-model添加到v-list-item-group，您将可以通过编程方式更改v-list-item-group的选定项目。

现在，逐步进行。首先，添加v-model：

 <v-list-item-group v-model='rule'
                    color="warning"
                    dense
 >

然后在rule中添加data并观看。如果它变成null，请清除表格。

...
data: {
  ...,
  rule: null
},
watch: {
  rule: function () {
    if (this.rule==null) this.clearRule()
  }
},
...

最后，当用户单击“清除”按钮时，清除rule。像这样修改您的clearRule方法：

clearRule(){
  this.SelectedRule ={}
  this.rule = nul
},

这是工作代码段：

      new Vue({
        el: '#app',
        vuetify: new Vuetify(),
        data: {
            msg: 'Hello',
            email: '',
        rules:[
          {id:"1","name":"rule one",conversion_rate:"1.17",round_to_nearest:".05",isRRP:"0"},
          {id:"2",name:"rule two",conversion_rate:"1.17",round_to_nearest:".05",isRRP:"0"},
          {id:"3",name:"rule three",conversion_rate:"1.17",round_to_nearest:".05",isRRP:"0"},
          {id:"4",name:"rule four",conversion_rate:"1.17",round_to_nearest:".05",isRRP:"0"},
          {id:"5",name:"rule five",conversion_rate:"1.17",round_to_nearest:".05",isRRP:"0"}
          
        ],
        SelectedRule:{},
        state:{
          formIsDirty:false
        },
        rule:null
        },
        watch: {
          rule: function () {
          if (this.rule==null) this.clearRule()
        }
        },
        methods: {
          editRule(rule){
            this.SelectedRule = Object.assign({},rule);
            this.state.formIsDirty = false
          },
          clearRule(){
            this.SelectedRule ={}
            this.rule = null
          },
          dirtyForm(){
            this.state.formIsDirty =true;
          },
          onScroll (e) {
            this.offsetTop = e.target.scrollTop
          },
        }
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.1.1/vuetify.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.1.1/vuetify.js"></script>
<div id="app" v-cloak>
<v-app>
  <v-container>
    <v-row>
      <v-col cols="4">
        {{msg}}
        <v-list 
                dense
                id="scroll-target"
                style="max-height: 100%"
                class="overflow-y-auto" 
                >
          <v-subheader>Rules</v-subheader>
          <v-list-item-group v-model='rule'
                             color="warning"
                             dense
                             >

            <v-list-item 
                         v-for="rule in rules" 
                         :key="rule.id"
                         @click="editRule(rule)"
                         >
              {{rule.name}}
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </v-col> 
      <v-col cols="8">
        <v-form fixed >
          <v-text-field label="Rule Name" v-model="SelectedRule.name" @change="dirtyForm"></v-text-field>
          <v-text-field label="Conversion Rate" v-model="SelectedRule.conversion_rate" @change="dirtyForm"></v-text-field>
          <v-text-field label="Round To Nearest" v-model="SelectedRule.round_to_nearest" @change="dirtyForm"></v-text-field>
          <v-checkbox label="is Brand RRP" v-model="SelectedRule.isRRP" checked @change="dirtyForm"></v-checkbox>
          <v-btn color="primary" :disabled="!state.formIsDirty">Save</v-btn>
          <v-btn color="info" @click="clearRule()">Clear</v-btn>

        </v-form>
      </v-col>
    </v-row>
  </v-container>
</v-app>
</div>

检查list-item-group如何取消选择所选记录

2 个答案: