Vue数据未更新但数据更改答案

【问题标题】：Vue data not updated but data changesVue数据未更新但数据更改
【发布时间】：2021-11-06 05:06:09
【问题描述】：

我快疯了。

这是代码，是我在表单中使用的一个组件，用于在我将 url 粘贴到输入时显示视频的预览：

<template>
  <div class="row">
    {{embedData}}
    <input v-model="embedData" name="content[body]" id="content_body">
    <div class="col-md-6">
      <div class="form-group">
        <div class="form-group url optional content_video_url form-group-valid">
          <label for="content_video_url" class="url optional">Url del video</label>
          <input @change="forceRerender" v-model="url" type="url" value="" name="content[video_url]" id="content_video_url" class="form-control is-valid string url optional">
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="video-responsive"
        <o-embed ref="embed" :url="url" :key="componentKey"></o-embed>
      </div>
    </div>

  </div>
</template>

<script>

import oEmbed from './oEmbed'
import EventBus from '../utils/eventBus'

export default {
  components: {
    oEmbed
  },

  props: {
    video_url: String,
    video_caption: String
  },

  created: function() {
    this.url = this.video_url;
    this.caption = this.video_caption;
  },
  mounted: function() {
    EventBus.$on('HTML', function (payLoad) {
      this.embedData = payLoad
      console.log('payLoad:' + this.embedData);
      console.log('arrived');
    });
  },
  data: function() {
    return {
      url: '',
      caption: '',
      componentKey: 0,
      embedData: ''
    }
  },
  methods: {
    forceRerender () {
      this.componentKey = this.componentKey + 1;
    }
  }
}
</script>

o-embed 是一个组件，我在组件更新时添加了一个简单的总线发射功能：

 mounted: function() {
    EventBus.$on('HTML', function (payLoad) {
      this.embedData = payLoad
      console.log('payLoad:' + this.embedData);
    });
  }

如果我检查控制台日志，我有这个

payLoad: <iframe src="https://player.vimeo.com/video/596287904?app_id=122963&amp;h=d77f5dc57c" width="426" height="240" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen title="Raritan Bay Cruisers-Hopelawn New Jersey CruisebNight 8-31-2021.wmv"></iframe>

Everythink 工作正常，this.embedData 看起来不错，我有日志，但是当我渲染 embedData 时，我认为它是空的。

我提供了一个附加信息：我正在强制重新渲染嵌入组件，但我认为它不相关。

有什么想法吗？

【问题讨论】：

您何时/何处在视图中呈现 embedData ？我看不到它
对不起，我只是将问题的 html 更改为 embedData，如您在模板中看到的那样购买，我有 {{embedData}} 以及输入表单，然后我需要更新后端。但同时查看 Chrome 中的 Vue 开发人员工具，数据不存在。只有在日志中我有数据，然后它就消失了
不确定componentKey 的更改是否会重新渲染所有内容。我认为 Vue 只是重新渲染模板中使用数据（或取决于它的值）的部分。 forcing Vue re-render the right way 怎么样

标签： javascript vue.js

【解决方案1】：

Mythos 发现了问题（至少其中一个）。 mustache 模板（双花括号）将内容解释为纯文本，而不是 html。如果您想将原始 html 注入您的页面，您应该执行类似的操作

<div v-html="embedData"></div>

改为 (https://vuejs.org/v2/guide/syntax.html#Raw-HTML)

【讨论】：

【解决方案2】：

您正在使用匿名函数。匿名函数内部的this 不提供组件的上下文。

尝试使用箭头函数：

EventBus.$on('HTML', (payLoad) => {
      this.embedData = payLoad
      console.log('payLoad:' + this.embedData);
    });

【讨论】：

或者你可以将函数绑定到父上下文
是的，这也是另一种方式。我个人更喜欢这种方式，因为这是 ES6 引入箭头函数的主要原因。
另一方面，我同意，但是在某些情况下，例如在应用程序范围内使用了某些实用程序方法，那么您就不能使用箭头函数（因为它需要定义位置的上下文，而不是已执行），但使用绑定功能。