数据更改时 Vue 不更新答案

【问题标题】：Vue doesn't update when data changes数据更改时 Vue 不更新
【发布时间】：2020-11-10 04:37:33
【问题描述】：

我有一个页面，我称之为 domain.com/subpage?soundfile=something

在我的 fetch 方法中，我使用来自 url 的查询来实际获取数据。根据console.log，查询有效，我正在获取数据并将其分配给同样有效的this.recording。但是，我的跨度和音频元素都不会更新。为什么？

<template>
  <div>
    <audio controls>
      <source :key="key" :src="recording" type="audio/mp3" />
    </audio>
    <span :key="key">{{ recording }}</span>
  </div>
</template>

<script>
const axios = require("axios").default;

export default {
  data() {
    return {
      key: 0,
      recording: ""
    };
  },
  async fetch(context) {
    const ip = await axios.get(
      "somebackend/?soundfile=" + context.query.soundfile
    );

    this.recording = ip.data[0].file.url;
    console.log(this.recording); // gives me the correct url/mp3 file
    this.key++; // should update the audio element and the span but doesn't
  }
};
</script>

【问题讨论】：

<source> 元素上的key 属性有什么意义？ fetch 是如何被调用的？我感觉this 不是你所期望的
当它没有更新时我添加了一个密钥，认为当我更改密钥时它可能会更新。 fetch 函数的最后一行。还是不行。
你忘了回答fetch怎么叫？我认为这是关键 - 通常，这些函数被创建为 methods 或在 mounted 或 created 等内部执行......但是你编写它的方式在 vue 中没有意义 - 即`fetch` vue 组件上的属性 - 在任何地方都看不到记录
nuxt docs 它会被自动调用，就像我最终使用的 asyncData 一样
哦，你从来没有提到过 nuxt

标签： javascript vue.js nuxt.js

【解决方案1】：

工作版本：不得不使用 asyncData 而不是 fetch。

<template>
  <div>
    <audio controls>
      <source :src="soundfile" type="audio/mp3" />
    </audio>
    <span>{{ soundfile }}</span>
  </div>
</template>

<script>
const axios = require("axios").default;

export default {
  async asyncData(context) {
    const ip = await axios.get(
      "somebackend/?soundfile=" + context.query.soundfile
    );

    return {
      soundfile: ip.data[0].file.url
    };
  }
};
</script>

【讨论】：

【解决方案2】：

你需要告诉音频标签加载完成。

如果不是很了解nuxt，但是说和vue差不多每当 this.recording 使用 watch 改变时，你可以在 aduio 标签上运行 .load()。

例如。

<audio controls ref='player'>

this.$watch('record', () => {
                this.$refs.player.load()
            })

【讨论】：

【解决方案3】：

我认为您错过的一件主要事情是添加方法块：

export default {
  data() {
    return {
      key: 0,
      recording: ""
    };
  },
  methods: {
    async fetch(context) {
      const ip = await axios.get(
        "somebackend/?soundfile=" + context.query.soundfile
      );
      this.recording = ip.data[0].file.url;
      console.log(this.recording); // gives me the correct url/mp3 file
      this.key++; // should update the audio element and the span but doesn't
    }
  },
};
</script>

由于它不在方法块中，所以对 this 的引用不是您所期望的，即 vue 实例。因此，密钥没有更新，它被记录到控制台，但由于它没有绑定到 vue 实例，因此更改不会反映在模板中。

问候

【讨论】：

如果我把它放在方法块中，它不会被自动调用。我需要访问上下文才能获得 ? 之后的部分在网址中。 nuxt docs 但是再次阅读文档让我意识到我可以使用 asyncData 而不是 fetch，这是可行的。
您可以使用beforeMount 或mounted 生命周期挂钩来调用该方法。
如果我将其作为普通方法调用，我不确定是否获得了上下文对象。但就像我说的那样，只需为 asyncData 切换 fetch 即可。方法块中不需要方法。
@Dhwanilshah - OP 忘了提到他正在使用 nuxt - 小细节改变了整个问题的面貌
@dan 别担心。