时间戳

首页 > 解决方案 > DOM 未使用 Vue 中的更新内容进行更新

javascript - DOM 未使用 Vue 中的更新内容进行更新

问题描述

我是在 Vue 中创建应用程序。我在通过事件总线显示更新内容时遇到问题。我也尝试将 vuex 用于本地内容，但它仍然显示相同的问题。

内容是具有一些对象的数组格式，通过一些表单输入创建。

控制台显示更新的内容，但更新的内容未显示在 DOM 上。

让我添加一些屏幕截图。

在此处输入图像描述

在此处输入图像描述

谁能帮我？？

让我在我的项目中添加一些代码。我在代码中使用 Vue Materail。

模板 1

<md-select v-model="bedroom" name="bedroom" id="bedroom" @md-selected="getBedVal('bedroom', 10)">
                            <md-option value="1">1</md-option>
                            <md-option value="2">2</md-option>
                            <md-option value="3">3</md-option>
                            <md-option value="4">4</md-option>
                            <md-option value="5">5</md-option>
                            <md-option value="6">6</md-option>
                            <md-option value="7">7</md-option>
                            <md-option value="8">8</md-option>
                            <md-option value="9">9</md-option>
                            <md-option value="10">10</md-option>

                        </md-select>

组成部分 1：-

methods: {
    ServiceInfoFun: function(obj){
      var existingIds = this.getServiceInfo.map((obj) => obj.servicename);
      if (!existingIds.includes(obj.servicename)) {
        this.getServiceInfo.push(obj);
          bus.$emit('extraservice', this.getServiceInfo);
          //this.$store.dispatch('serviceListAction', this.getServiceInfo)
      } else {
        this.getServiceInfo.forEach((element, index) => {
          if (element.servicename === obj.servicename) {
              this.getServiceInfo[index] = obj;
              // this.$store.dispatch('serviceListAction', this.getServiceInfo); 
              bus.$emit('extraservice', this.getServiceInfo);
          };
        });
      };
    },
    getBedVal: function(name, price){ 
      var obj = {
        servicename: name,
        serviceprice: price * this.bedroom,
        serviceqty : this.bedroom
      }
       this.ServiceInfoFun(obj);
    },
  }

模板 2

{{ serviceInfo }}

组件 2：

  created(){
    bus.$on('extraservice', (data) => {
        this.serviceInfo = data;
        console.log(this.serviceInfo);
  },

提前致谢。

标签： javascriptarraysvuejs2vuexdom-events

解决方案

很可能您的数据是在加载DOM之后加载的，因为它是嵌套的，所以它不会是响应式的，因此您不能指望它会更新。

你有几个选择：

1）在某处放置一个 v-if 以防止在数据到位之前加载 DOM。

2）手动强制重新加载，我首选的方法是给一个密钥并更改密钥。有关详细示例，请参见此处：https ://michaelnthiessen.com/force-re-render/

注意：详细说明一下，如果您在 PROPS 中获取数据，那么如果在某个生命周期中说“已创建”，那么它来得相当早，那么 DOM 肯定会首先加载。

推荐阅读