Question

我想我显然陷入了Vue.js警告。无论如何：我正在呈现项目（注释）的v-if列表，并且当选中此复选框时，我想将其反转。

我从存储中获取数据（Axios get），并将其立即分配给其他属性（appNotes），以便稍后进行操作。我无法在第一个渲染器上更新笔记。当我选中复选框时，它们就会显示。以下是相关代码：

  <div class="form-check">
  <input type="checkbox" id="appNotes" class="form-check-input" @click="handleClick"
  v-model="check">
  <label for="appNotes" class="form-check-label" >Older Notes First</label>
  <!-- {{check? this.appNotes=[...this.notes].reverse():this.appNotes=this.notes}} -->
  <!-- This surprisingly reverses the notes and produces s warnig about inifinite loop -->
</div>
<section class="row text-center text-lg-left " v-if="notes.length">
  <NoteThumb 
  v-for="note in appNotes" 
  :key="note.id" 
  :note="note">
    <h4>{{ note.title }}</h4>
    <p>{{ note.date }}</p>
    <p>{{ note.id }}</p>
  </NoteThumb>
</section>


  data(){
    return {
      appNotes: {},
      check:false
  },
  handleClick(){
    this.check? this.appNotes=[...this.notes].reverse():this.appNotes=this.notes
  },
  passNotes(){
    this.$set(this.appNotes, this.notes, null)
    this.appNotes=null
    this.$forceUpdate()
  },
  async created (){
  await this.$store.dispatch('notes/getNotes')
  await this.passNotes()
  }

https://codesandbox.io/s/2jqr60xmjj 它不是有效的链接，但是您可以在“首页”组件上看到完整的代码

Answer 1

这是最终版本（这4行让我整天笑了）：

in computed:
    appNotes(){
        let reverse=this.notes.slice().reverse()
        return this.check? reverse:this.notes
    }

我删除了所有其他内容。事实就是那样简单。

Answer 2

我建议您取出@ click =“ handleClick”并创建一个watch属性以进行检查。因此，在加载异步请求之后，您可以将检查设置为false，然后它将呈现您的注释列表。

<template>
<div class="form-check">
  <input type="checkbox" id="appNotes" class="form-check-input" v-model="check">
  <label for="appNotes" class="form-check-label" >Older Notes First</label>
  <!-- {{check? this.appNotes=[...this.notes].reverse():this.appNotes=this.notes}} -->
  <!-- This surprisingly reverses the notes and produces s warnig about inifinite loop -->
</div>
<section class="row text-center text-lg-left " v-if="notes.length">
  <NoteThumb 
  v-for="note in appNotes" 
  :key="note.id" 
  :note="note">
    <h4>{{ note.title }}</h4>
    <p>{{ note.date }}</p>
    <p>{{ note.id }}</p>
  </NoteThumb>
</section>
</template>
<script>
    export default {
        data() {
            return {
                appNotes: {},
                check:false
            };
        },
        methods:
        {
        passNotes(){
            this.$set(this.appNotes, this.notes, null)
            this.appNotes=null
            this.$forceUpdate()
            //here you can just set check to false and it will update the appNotes
            this.check = false
         },
        async created (){
            await this.$store.dispatch('notes/getNotes')
            await this.passNotes()
        }
        },
        watch: {
            check: function () {
                this.check? this.appNotes=[...this.notes].reverse():this.appNotes=this.notes
            }
        }

    }
</script>

尝试更新DOM

2 个答案: