三行代码  ›  专栏  ›  技术社区  ›  StuP

响应式Vue组件在数据更改时不更新

  •  1
  • StuP  · 技术社区  · 3 月前

    我是Vue的新手,尝试显示一个“注释”列表,当按下按钮时会更新(我刚刚硬编码了要添加的值)。问题是,在我向数组中添加新项后,UI中不会更新该项。我使用的是Vue3,我使用的:键是唯一的。我制作的其他“小部件”也如预期的那样工作,但它们从api响应中获取数据。它是否与处理API响应的异步/等待方面有关,而不是仅仅将其附加/推送到数据数组?

    <template>
     <Widget class="notes" :style="style" @load="showNotes()">
    <h3>Notes</h3>
    <p v-for="item in data" :key="item.id">{{ item.note }}</p>
    
    <button @click="addNote()">Add</button>
    </Widget>
    </template>
    
    <script>
    import Widget from "./Widget.vue";
    
    export default {
      name: "Notes",
      props: {
        widgetWidth: Number,
      },
      computed: {
        style() {
          return "max-width: " + this.widgetWidth + "px";
        },
      },
      data() {
        return {
          notes: undefined,
        };
      },
    
      methods: {
        addNote() {
          var x;
          if (!this.data) {
            this.data = [];
            x = 0;
          } else {
            x = this.data.length;
            console.log(x);
          }
          this.data.push({ id: x, note: "another" });
          console.log(this.data);
        },
        showNotes() {
          this.data = [{ id: 0, note: "init" }];
        },
      },
      beforeMount() {
        this.showNotes();
      },
      components: { Widget },
    };
    </script>
    
    <style scoped>
    .notes {
      min-width: 100px;
      word-wrap: break-word;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .notes > * {
      flex-grow: 1;
    }
    </style>
    
    1 回复  |  直到 3 月前
        1
  •  0
  •   Mina    3 月前

    这是因为您修改了 data 财产,没有 数据 财产,它是 notes 属性,也不需要@load事件或beforeMount事件来初始化notes属性。

    This working example

        2
  •  0
  •   Donavan    3 月前

    创建一个名为notes的计算属性,该属性返回数据对象中的notes属性。在备注中的v-for-use项中。单击该按钮时,数据对象中的注释将更新。computed属性检测更改并更新ui